msvgc

Msvgc

UTILS pour générer des composants React à partir de fichiers SVG simples
(compatible avec React-Native)

Installer:

 # install package globally
npm install -g msvgc

Usage:

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

--camelCase Le drapeau de la caméra crée des composants avec des noms de classe de camel-case

--react-native crée des composants à l'aide de la bibliothèque React-Native-SVG

- Le drapeau --color crée des composants réactifs natifs avec des accessoires de couleur transmis au svg pour enfants

- Le drapeau --typescript utilisera les instructions d'importation TypeScript, par exemple ( import * as React )

--coffeescript utilisera la syntaxe COCFEEScript CJSX pour la création de composants

Notes:

Si les paramètres par défaut ne sont pas définis, le répertoire de travail actuel sera utilisé comme chemin vers les fichiers .svg avec sortie dans le répertoire ./SVG.

Les sous-répertoires contenant des fichiers .svg généreront leurs composants REACT correspondants dans un sous-répertoire dans le chemin de sortie.

Le chemin de sortie contient un index.js qui exporte tous les composants générés.

React JS:

Utilisez des composants générés dans vos fichiers JSX / TSX / CJSX:

 [ ... ]

import Pic from './svgComponents/Pic'

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

[ ... ] 

FAIRE:

• Créer un fichier d'index dans le répertoire des composants cibles.
  • Fournir un avertissement lorsque des noms de composants en double existent dans l'index.
• Comparez les fichiers existants dans le répertoire des composants cibles.