pixo下载 - pixo源代码下载

pixo

三方组件

1.0.0

下载

Pixo

将SVG图标转换为React组件

npm i pixo

将目录或SVG文件路径作为第一个参数传递。

$ pixo src --out-dir dist

每个SVG图标将自动优化并重命名为组件的Pascal Case FileName。然后可以将图标组件导入到React应用程序中。

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

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

默认组件模板包括：

size （数字）像素宽度和高度（默认24 ）
color （字符串）颜色值传递给SVG fill属性（默认的'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
草图：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从SVG的原始Viewbox值
pathData提取的<path>元素d属性的路径数据

选项

可以将选项作为标志传递到CLI或添加到package.json中的pixo字段中。

运行pixo --help以查看选项列表。

outDir （String）输出目录（默认DIST）
template （字符串）内置模板的名称或自定义模板的路径
index （布尔）创建一个index.js枪管模块
iconComponent （boolean）创建一个Icon.js包装器组件
recursive （布尔）递归阅读子目录中的所有SVG

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

示例package.json

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