pixo Download - pixo Source Code Download

pixo

Komponenten von Drittanbietern

1.0.0

Herunterladen

Pixo

Umwandeln Sie SVG -Symbole in React -Komponenten

npm i pixo

Übergeben Sie einen Verzeichnis oder einen SVG -Dateipfad als erstes Argument.

$ pixo src --out-dir dist

Jedes SVG -Symbol wird automatisch optimiert und in einen Pascal -Fallfileinnamen für die Komponente umbenannt. Icon -Komponenten können dann in eine React -Anwendung importiert werden.

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

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

Die Standardkomponentenvorlage enthält Requisiten für:

size (Zahl) Pixelbreite und Höhe (Standard 24 )
color (Zeichenfolge) Farbwert, das an das SVG fill übergeben wurde (Standard 'currentcolor' )

SVG -Anforderungen

Jedes SVG -Symbol muss den folgenden entsprechen:

Verwenden Sie ein Square viewBox -Attribut, vorzugsweise 0 0 24 24
Verwenden Sie nur eine einzelne Farbe (z. B. schwarz)
Verwenden Sie für die besten Ergebnisse nur <path> Elemente
Verwenden Sie keine Transformationen

Pixo enthält experimentelle Unterstützung für <circle> , <polygon> und <rect> Elemente.

Die folgenden Elemente werden ignoriert:

Elemente innerhalb eines <defs> oder <clipPath>
Elemente mit dem Attribut fill="none"
<ellipse> Elemente
<line> Elemente
<polyline> Elemente

Umwandlung von SVG -Formen in `<path>` Elemente

Die meisten Grafikanwendungen können Formen in SVG -Pfade umwandeln.

Adobe Illustrator: Verwenden Sie den Befehl Compound Path
Figma: Tk
Skizze: Tk

Vorlagen

Pixo verwendet eine Standardvorlage zum Rendern, enthält jedoch einige integrierte Optionen.

default : einfaches SVG ohne Styling
styledSystem : Styled-Komponente mit Rand, Polsterung und Farbquellen aus dem Stil des Styled-Systems

Benutzerdefinierte Vorlagen

Um eine benutzerdefinierte Vorlage zu verwenden, übergeben Sie einen Pfad an Ihre Vorlage an das Flag --template .

pixo icons --template custom-template.js

Eine Vorlage sollte eine Funktion sein, die einen String für den Komponentenquellcode zurückgibt, der als Node.js -Modul geschrieben wurde.

 // 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 } `

Vorlagenfunktionsargumente

name Namens Camel Case, der für den Komponentennamen verwendet werden kann
viewBox Der ursprüngliche Ansichtskastenwert aus der SVG
pathData extrahierte Pfaddaten für das d -Attribut des <path> -Elements

Optionen

Optionen können als Flags an die CLI übergeben oder einem pixo -Feld in Ihrem package.json hinzugefügt werden. Json

Führen Sie pixo --help aus, um die Liste der Optionen anzuzeigen.

outDir (String) Ausgabeverzeichnis (Standard Dist)
template (Zeichenfolge) Name der integrierten Vorlage oder Pfad zur benutzerdefinierten Vorlage
index (boolean) Erstellen Sie ein index.js -Fassmodul
iconComponent (boolean) Erstellen Sie eine Icon.js -Wrapper -Komponente
recursive (boolean) rekursiv alle SVGs in Unterverzeichnissen rekursiv lesen

CLI -Flaggen

-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

Beispiel package.json

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