pixoダウンロードpixoソースコードのダウンロード

pixo

サードパーティ製コンポーネント

1.0.0

ダウンロード

ピクソ

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アイコンは、次のものに準拠する必要があります。

正方形viewBox属性、できれば0 0 24 24を使用します
単色のみを使用します（例：黒）
最良の結果を得るには、 <path>要素のみを使用します
変換を使用しないでください

Pixoには、 <circle> 、 <polygon> 、および<rect>要素の実験的サポートが含まれています。

次の要素は無視されます。

<defs>または<clipPath>内の要素
fill="none"属性を持つ要素
<ellipse>要素
<line>要素
<polyline>要素

SVG形状を`<path>`要素に変換します

ほとんどのグラフィックアプリケーションは、形状をSVGパスに変換できます。

Adobe Illustrator： Compound Pathコマンドを使用します
Figma：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）outputディレクトリ（デフォルトdist）
template （文字列）ビルトインテンプレートの名前またはカスタムテンプレートへのパス
index （boolean） 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
  }
}