Download do pixo - Download do código -fonte pixo

pixo

Componentes de terceiros

1.0.0

Baixar

Pixo

Converter ícones SVG em componentes do React

npm i pixo

Passe um diretório ou caminho do arquivo SVG como o primeiro argumento.

$ pixo src --out-dir dist

Cada ícone SVG será otimizado e renomeado automaticamente para um nome de arquivo de casos Pascal para o componente. Os componentes do ícone podem então ser importados para um aplicativo React.

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

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

O modelo de componente padrão inclui adereços para:

size (número) Largura e altura do pixel (padrão 24 )
Valor da cor da color (string) passada para o atributo fill SVG (padrão 'currentcolor' )

Requisitos de SVG

Cada ícone SVG deve estar em conformidade com o seguinte:

Use um atributo Square viewBox , de preferência 0 0 24 24
Use apenas uma única cor (por exemplo, preto)
Para obter melhores resultados, use apenas elementos <path>
Não use transformamentos

O PIXO inclui suporte experimental para elementos <circle> , <polygon> e <rect> .

Os seguintes elementos serão ignorados:

Elementos dentro de um <defs> ou <clipPath>
Elementos com o atributo fill="none"
<ellipse> elementos
<line> elementos
elementos <polyline>

Convertendo formas SVG em elementos `<path>`

A maioria dos aplicativos gráficos pode converter formas em caminhos SVG.

Adobe Illustrator: Use o comando Compound Path
Figma: tk
Esboço: Tk

Modelos

O Pixo usa um modelo padrão para renderizar, mas inclui algumas opções internas.

default : SVG simples sem estilo
styledSystem : Componente de estilo com margem, preenchimento e adereços de cores do sistema estilizado

Modelos personalizados

Para usar um modelo personalizado, passe um caminho para o seu modelo para o sinalizador --template .

pixo icons --template custom-template.js

Um modelo deve ser uma função que retorne uma string para o código -fonte do componente, escrito como um 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 da função de modelo

name Camel Cased Name que pode ser usado para o nome do componente
viewBox o valor original do ViewBox do SVG
Dados do caminho extraídos pathData para o atributo d do elemento <path>

Opções

As opções podem ser passadas como bandeiras para a CLI ou adicionadas a um campo pixo em seu package.json

Execute pixo --help para ver a lista de opções.

Diretório de saída outDir (String) (Padrão Dist)
template (string) nome do modelo interno ou caminho para o modelo personalizado
index (booleano) Crie um módulo de barril index.js
iconComponent (boolean) Crie um componente Icon.js Wrapper
recursive (booleano) lê recursivamente todos os SVGs em subdiretos

Bandeiras da 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

Exemplo package.json

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