Genereu el component React Icon a partir de les icones SVG per mostrar

Bloc

Genereu el component React Icon a partir de les icones SVG per mostrar

Genereu el component React Icon a partir de les icones SVG per mostrar

Generador de icones de reacció SVG. Genereu un component d’icones de reacció a partir d’icones SVG per mostrar-les, redimensionar-les i recolorar-les.

Us hem preparat una demostració en directe a Generador de reaccions d'icones SVG

Admet React Native

La forma més ràpida de convertir el vostre svg a React Component

yarn global add react-svg-icon-generator yarn svg-icon-generate -- --svgDir ./icons --destination ./Icon.tsx

per obtenir opcions detallades, executeu només yarn react-svg-icon-generator

Previsualització del component generat

Vista prèvia

directori font amb SVG i aquest és el component de sortida de la tasca gulp per tant, a la producció no teniu cap dependència.

Instal·lació

cal afegir-ho només al desenvolupament, perquè generarà components de reacció autònoms directament a la vostra base de codis

javascript encodeuri vs encodeuricomponent
npm install --save-dev react-svg-icon-generator

Configuració de la tasca senzilla

const configureSvgIcon = require('react-svg-icon-generator').default; configureSvgIcon({ destination: path.join(__dirname, 'components', 'Icon.js'), svgDir: './icons', });
  • svgDir (obligatori): ruta al vostre directori amb fitxers svg. Pot ser un camí relatiu, però és millor utilitzar path.join(__dirname, 'icons') ruta absoluta, de manera que funcionarà a qualsevol directori del projecte
  • destí (obligatori) - path.join (__ dirname, 'components', 'Icon.js')

executeu-la per gulp svg-icon

Configuració de la tasca de glop completa

const configureSvgIcon = require('react-svg-icon-generator').default; configureSvgIcon({ comment: 'Generated by gulp svg-icon, if you add new icon run gulp svg-icon', componentName: 'Icon', destination: path.join(__dirname, 'components', 'Icon.js'), keepFillColor: false, native: false, radium: true, reactPureRender: true, svgDir: path.join(__dirname, 'icons'), template: path.join(__dirname, 'template', 'icon.nunjucks'), });
  • comentari (opcional): s'afegirà al component generat, de manera que altres desenvolupadors sabran què fer
  • componentName (opcional): canviarà el nom del component, per defecte a 'Icona'
  • keepFillColor (opcional): mantindrà el color de farciment original del SVG importat en cas que vulgueu utilitzar diversos colors a la vostra icona, per tant no podreu utilitzar color prop
  • nativa (opcional): generarà components que es poden utilitzar en projectes React Native. Aquesta funcionalitat depèn de react-native-svg biblioteca que s’ha d’instal·lar per separat (no s’inclou a les dependències). Podeu sobreescriure fàcilment la plantilla nativa predeterminada mitjançant plantilla opció
  • reactPureRender (opcional): s'utilitzarà import {PureComponent} from 'react'; en lloc de import {Component} from 'react';. Si utilitzeu això, assegureu-vos que utilitzeu React> = v15.3.0.
  • ràdio (opcional): importarà el component d'icona radium i wrap amb l'embolcall de radium. Per utilitzar Radium s’ha d’instal·lar per separat (no forma part de dependències).
  • plantilla (opcional): proporcioneu un camí d'accés a la vostra plantilla personalitzada; podeu veure l'exemple a Icon.template

executeu-la per gulp svg-icon

Configureu el nom propi de la tasca de glop

const {configureGenerator} = require('react-svg-icon-generator').default; const config = { comment: 'Generated by gulp svg-icon, if you add new icon run gulp svg-icon-whatever', destination: path.join(__dirname, 'components', 'Icon.js'), reactPureRender: true, svgDir: path.join(__dirname, 'icons'), template: path.join(__dirname, 'template', 'icon.nunjucks'), } gulp.task('svg-icon-whatever', configureGenerator(config));

igual que l'anterior + el vostre propi nom de tasca

Utilitzeu el component Generar icona

import React, {Component} from 'react'; import Icon from './Icon'; export default class App extends Component { render() { return ( Simple possible usage Setup color and bounding width and height Setup color and bounding width and height to size (square) Setup custom style and className Setup onClick behavior alert('clicked on icon')} /> Show all icons at once with description (for finding right icon) ); } }

qualsevol punt que no aparegui a la llista es passarà directament a svg com a puntals restants.

Desenvolupament

git clone git@github.com:blueberryapps/react-svg-icon-generator.git cd react-svg-icon npm i npm link cd examples/simple npm link react-svg-icon-generator npm i gulp svg-icon npm start open http://127.0.0.1:3000

Detalls de la descàrrega:

Autor: blueberryapps

GitHub: https://github.com/blueberryapps/react-svg-icon-generator

com es comproven els tuits suprimits

#reactjs #javascript