pixo Download - pixo Source Code Download

pixo

Composants tiers

1.0.0

Télécharger

pixo

Convertir les icônes SVG en composants React

npm i pixo

Passez un répertoire ou un chemin de fichier SVG comme premier argument.

$ pixo src --out-dir dist

Chaque icône SVG sera automatiquement optimisée et renommée en nom de fichier de cas Pascal pour le composant. Les composants de l'icône peuvent ensuite être importés dans une application React.

 import React from 'react'
import CheckIcon from './CheckIcon'

const App = props => (
  < div >
    < CheckIcon />
  </ div >
)

Le modèle de composant par défaut inclut les accessoires pour:

size (nombre) Largeur et hauteur de pixels (par défaut 24 )
Valeur de couleur de color (chaîne) transmise à l'attribut fill SVG (par défaut 'currentcolor' )

Exigences SVG

Chaque icône SVG doit être conforme aux éléments suivants:

Utilisez un attribut Square viewBox , de préférence 0 0 24 24
Utilisez uniquement une seule couleur (par exemple noir)
Pour de meilleurs résultats, utilisez uniquement des éléments <path>
N'utilisez pas de transformations

Pixo inclut le support expérimental pour les éléments <circle> , <polygon> et <rect> .

Les éléments suivants seront ignorés:

Éléments au sein de <defs> ou <clipPath>
Éléments avec l'attribut fill="none"
<ellipse> Éléments
<line> Éléments
<polyline> Éléments

Conversion des formes SVG en éléments `<path>`

La plupart des applications graphiques peuvent convertir les formes en chemins SVG.

Adobe Illustrator: Utilisez la commande Compound Path
Figma: tk
Sketch: tk

Modèles

Pixo utilise un modèle par défaut pour le rendu, mais comprend certaines options intégrées.

default : SVG ordinaire sans style
styledSystem : Composant stylé avec marge, rembourrage et accessoires de couleur du système stylé

Modèles personnalisés

Pour utiliser un modèle personnalisé, passez un chemin à votre modèle à l'indicateur --template .

pixo icons --template custom-template.js

Un modèle doit être une fonction qui renvoie une chaîne pour le code source du composant, écrite comme un module Node.js.

 // default template
module . exports = ( {
  name ,
  viewBox ,
  pathData
} ) => `import React from 'react'

const ${ name } Icon = ({
  size,
  color,
  ...props
}) => (
  <svg
    {...props}
    viewBox=' ${ viewBox } '
    width={size}
    height={size}
    fill={color}
  >
    <path d=' ${ pathData } ' />
  </svg>
)

${ name } Icon.displayName = ' ${ name } Icon'

${ name } Icon.defaultProps = {
  size: 24,
  color: 'currentcolor'
}

export default ${ name } `

Arguments de fonction de modèle

name Camel Basé Nom qui peut être utilisé pour le nom du composant
viewBox la valeur Viewbox d'origine à partir du SVG
Données de chemin extrait de pathData pour l'attribut d de l'élément <path>

Options

Les options peuvent être transmises sous forme de drapeaux à la CLI ou ajoutées à un champ pixo dans votre package.json

Exécutez pixo --help pour voir la liste des options.

Répertoire de sortie outDir (String) (DIST DEFAUT)
template (chaîne) Nom du modèle intégré ou chemin vers le modèle personnalisé
index (booléen) Créez un module de baril index.js
iconComponent (Boolean) Créer un composant d'emballage Icon.js
recursive (booléen) Lisez récursivement tous les SVG dans les sous-répertoires

Drapeaux de CLI

-d --out-dir          Output directory
-t --template         Name of built-in template or path to custom template
-i --index            Include index.js barrel module
-c --icon-component   Include wrapper Icon.js component
-r --recursive        Recursively read all SVGs in subdirectories

Exemple package.json

{
  "pixo" : {
    "outDir" : " dist " ,
    "template" : " ./custom-template.js " ,
    "index" : true ,
    "iconComponent" : true ,
    "recursive" : true
  }
}