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