msvgc

MSVGC

Utils zum Generieren von React -Komponenten aus einfachen SVG -Dateien
(kompatibel mit React-Native)

Installieren:

 # install package globally
npm install -g msvgc

Verwendung:

 # provide for utils
msvgc -f ./path/to/pic.svg -o ./svgComponents/

--camelCase Flag erstellt Komponenten mit Kamelfallklassennamen

--react-native Flag erstellt Komponenten mit React-Native-SVG-Bibliothek

--color Flag erzeugt reagierende Komponenten mit Farbpropten, die an die SVG-Kinderfüllung übergeben werden

--typescript Flag verwendet TypeScript-Import-Anweisungen import * as React z.

--coffeescript Flag-Coffeescript-Flag verwendet die Coffeescript-CJSX-Syntax zum Erstellen von Komponenten

Anmerkungen:

Wenn keine Standardparamente festgelegt sind, wird das aktuelle Arbeitsverzeichnis als Pfad zu .svg -Dateien mit Ausgabe im Verzeichnis ./SVG verwendet.

Unterverzeichnisse, die .SVG -Dateien enthalten, generieren ihre entsprechenden React -Komponenten innerhalb eines Unterverzeichnisses im Ausgangspfad.

Der Ausgangspfad enthält einen Index.js, der alle generierten Komponenten exportiert.

Reagieren js:

Verwenden Sie generierte Komponenten in Ihren JSX/TSX/CJSX -Dateien:

 [ ... ]

import Pic from './svgComponents/Pic'

class MyComponent extends Component {
  render ( ) {
    return (
      < div >
        < Pic width = { 300 } height = { 100 } />
        < p > Lorem ipsum... </ p >
      </ div >
    ) ;
  }
}

[ ... ] 

Todo:

• Erstellen Sie die Indexdatei im Zielkomponentenverzeichnis.
  • Geben Sie Warnung an, wenn im Index doppelte Komponentennamen vorhanden sind.
• Vergleichen Sie vorhandene Dateien im Zielkomponentenverzeichnis.