Descargar pixo - Descargar el código fuente de pixo

pixo

Componentes de terceros

1.0.0

Descargar

pixo

Convertir los iconos SVG en componentes React

npm i pixo

Pase una ruta de archivo de directorio o SVG como primer argumento.

$ pixo src --out-dir dist

Cada icono SVG se optimizará automáticamente y se renombrará a un nombre de archivo PASCAL CASE para el componente. Los componentes de icono se pueden importar a una aplicación React.

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

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

La plantilla de componente predeterminada incluye accesorios para:

size (número) ancho y altura de píxeles (predeterminado 24 )
color (String) Valor de color Pasado al atributo fill SVG (predeterminado 'currentcolor' )

Requisitos de SVG

Cada icono SVG debe cumplir con lo siguiente:

Utilice un atributo Square viewBox , preferiblemente 0 0 24 24
Solo use un solo color (por ejemplo, negro)
Para obtener los mejores resultados, solo use elementos <path>
No use transformaciones

PIXO incluye soporte experimental para elementos <circle> , <polygon> y <rect> .

Los siguientes elementos serán ignorados:

Elementos dentro de un <defs> o <clipPath>
Elementos con el atributo fill="none"
<ellipse> elementos
<line> elementos
<polyline> elementos

Convertir formas de SVG en elementos `<path>`

La mayoría de las aplicaciones gráficas pueden convertir formas en rutas SVG.

Adobe Illustrator: use el comando Compound Path
Figma: TK
Sketch: TK

Plantillas

PIXO utiliza una plantilla predeterminada para la representación, pero incluye algunas opciones incorporadas.

default : SVG simple sin estilo
styledSystem : componente con estilo con accesorios de margen, acolchado y color del sistema de estilo

Plantillas personalizadas

Para usar una plantilla personalizada, pase una ruta a su plantilla al indicador --template .

pixo icons --template custom-template.js

Una plantilla debe ser una función que devuelva una cadena para el código fuente del componente, escrito como un módulo 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 } `

Argumentos de función de plantilla

name Nombre cubierto de camello que se puede usar para el nombre del componente
viewBox el valor de vista de viewbox original del SVG
Los datos de ruta extraídos de pathData para el atributo d de <path> Element del elemento

Opción

Las opciones se pueden pasar como banderas al CLI o agregar a un campo pixo en su package.json

Ejecute pixo --help para ver la lista de opciones.

Directorio de salida outDir (String) (Dist predeterminado)
template (cadena) Nombre de la plantilla o ruta incorporada a la plantilla personalizada
index (booleano) Crear un módulo de barril index.js
iconComponent (boolean) Cree un componente de envoltura Icon.js
recursive (booleano) lea recursivamente todos los SVG en subdirectorios

Banderas 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

Ejemplo de package.json

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