Скачать pixo - Скачать исходный код pixo

pixo

Сторонние компоненты

1.0.0

Скачать

пиксо

Преобразовать значки SVG в компоненты React

npm i pixo

Передайте путь каталога или файла SVG в качестве первого аргумента.

$ pixo src --out-dir dist

Каждый значок SVG будет автоматически оптимизирован и переименован в имя файла палата Pascal для компонента. Компоненты значков могут затем быть импортированы в приложение React.

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

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

Шаблон компонента по умолчанию включает в себя реквизиты для:

size (номер) ширина и высота пикселей (по умолчанию 24 )
color (строка) Значение цвета, передаваемое атрибуту fill SVG (по умолчанию 'currentcolor' )

Требования SVG

Каждая значка SVG должна соответствовать следующему:

Используйте атрибут Square viewBox , предпочтительно 0 0 24 24
Используйте только один цвет (например, черный)
Для достижения наилучших результатов используйте только элементы <path>
Не используйте преобразования

Pixo включает в себя экспериментальную поддержку элементов <circle> , <polygon> и <rect> .

Следующие элементы будут проигнорированы:

Элементы внутри <defs> или <clipPath>
Элементы с атрибутом fill="none"
<ellipse> элементы
<line> Элементы
<polyline> элементы

Преобразование форм SVG в элементы `<path>`

Большинство графических приложений могут преобразовать формы в пути SVG.

Adobe Illustrator: используйте команду Compound Path
Фигма: тк
Эскиз: TK

Шаблоны

Pixo использует шаблон по умолчанию для рендеринга, но включает в себя некоторые встроенные параметры.

default : простой SVG без стиля
styledSystem : стиль-компонент с краем, прокладкой и цветными реквизитами из стиля-системы

Пользовательские шаблоны

Чтобы использовать пользовательский шаблон, перейдите по пути к своему шаблону к флагу --template .

pixo icons --template custom-template.js

Шаблон должен быть функцией, которая возвращает строку для исходного кода компонента, записанную как модуль 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 } `

Аргументы функции шаблона

name верблюда имени верблюда, которое можно использовать для имени компонента
viewBox Оригинальное значение Viewbox из SVG
pathData извлеченные данные пути для атрибута D <path> element d

Параметры

Варианты могут быть переданы в качестве флагов в CLI или добавлены в поле pixo в вашем package.json

Запустите pixo --help , чтобы увидеть список параметров.

outDir (строка) выходной каталог (DIST по умолчанию)
template (строка) Имя встроенного шаблона или пути к пользовательскому шаблону
index (логический) создать модуль ствола index.js
iconComponent (boolean) создать компонент обертки Icon.js
recursive (логическое) рекурсивно прочитать все SVG в подкатализаторах

Кли -флаги

-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

Пример package.json

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