REACT ICON COMPONENT AUS SVG-ICONS GENERIEREN, UM SIE ANZUZEIGEN

React Icon Component aus SVG-Icons generieren, um sie anzuzeigen

React SVG Icon Generator .Generieren Sie React Icon Component aus SVG Icons, um sie anzuzeigen, in der Größe zu ändern und neu einzufärben.

Wir haben eine Live-Demo für Sie vorbereitet unter Reagieren Sie SVG Icon Live Generator

Unterstützt React Native

Der schnellste Weg, um Ihr SVG in React Component zu konvertieren

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

für detaillierte Optionen einfach |_+_| . ausführen

Vorschau der generierten Komponente

Quellverzeichnis mit SVG und Dies ist eine Ausgabekomponente von gulp-Task In der Produktion sind Sie also ohne Abhängigkeiten.

Installation

Sie müssen dies nur der Entwicklung hinzufügen, da es eine eigenständige Reaktionskomponente direkt in Ihre Codebasis generiert

Flattern zum Auffrischen ziehen

yarn react-svg-icon-generator

Schluckaufgabe einfach einrichten

npm install --save-dev react-svg-icon-generator

svgDir (erforderlich) - Pfad zu Ihrem Verzeichnis mit SVG-Dateien. Kann ein relativer Pfad sein, aber es ist besser, |_+_| . zu verwenden absoluter Pfad, damit es in jedem Projektverzeichnis funktioniert
Ziel (erforderlich) - path.join(__dirname, ‚Komponenten‘, ‚Icon.js‘)

führe es durch |_+_|

Schluckaufgabe voll einrichten

const configureSvgIcon = require('react-svg-icon-generator').default; configureSvgIcon({ destination: path.join(__dirname, 'components', 'Icon.js'), svgDir: './icons', });

Kommentar (optional) - es wird der generierten Komponente hinzugefügt, damit andere Entwickler wissen, was zu tun ist
Komponentenname (optional) - es ändert den Namen der Komponente, standardmäßig auf 'Icon'
KeepFillColor (optional) - Es wird die ursprüngliche Füllfarbe von importierten SVG beibehalten, falls Sie mehrere Farben in Ihrem Symbol verwenden möchten, daher können Sie |_+_| . nicht verwenden Stütze
einheimisch (optional) - Es wird eine Komponente generiert, die in React Native-Projekten verwendet werden kann. Diese Funktionalität ist abhängig von reagieren-native-svg Bibliothek, die separat installiert werden muss (sie ist nicht in Abhängigkeiten enthalten). Sie können die native Standardvorlage einfach überschreiben mit Vorlage Möglichkeit
reagierenPureRender (optional) - es wird |_+_| . verwendet statt |_+_|. Wenn Sie dies verwenden, stellen Sie sicher, dass Sie React >= v15.3.0 verwenden.
Radium (optional) - Es wird Radium importieren und die Icon-Komponente mit dem Radium-Wrapper umhüllen. Um Radium nutzen zu können, muss es separat installiert werden (es ist nicht Teil von Abhängigkeiten).
Vorlage (optional) - Geben Sie den Pfad zu Ihrer benutzerdefinierten Vorlage an, Sie können sich das Beispiel unter Icon.template ansehen

führe es durch |_+_|

Eigenen Namen der Schluckaufgabe einrichten

path.join(__dirname, 'icons')

wie vorher + Ihr eigener Aufgabenname

Verwenden Sie die Komponente zum Generieren von Symbolen

gulp svg-icon

Alle nicht aufgeführten Requisiten werden direkt als Rest-Requisiten an svg übergeben.

Entwicklung

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'), });

Download-Details:

Autor: Blaubeerapps

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

www.roku./link

#reactjs #javascript

React Icon Component aus SVG-Icons generieren, um sie anzuzeigen