msvgc

MSVGC

プレーンSVGファイルからReactコンポーネントを生成するためのUTIL
（React-Nativeと互換性があります）

インストール：

 # install package globally
npm install -g msvgc

使用法：

 # provide for utils
msvgc -f ./path/to/pic.svg -o ./svgComponents/

--camelCaseフラグは、Camelケースのクラス名を持つコンポーネントを作成します

--react-native Flagは、React-Native-SVGライブラリを使用してコンポーネントを作成します

--color Flagは、SVG Children's Fill Propに渡されたカラープロップでReact-Nativeコンポーネントを作成します

--typescriptフラグはTypeScriptインポートステートメントを使用します（ import * as React ）

--coffeescriptフラグは、コンポーネントを作成するためにcoffeescript cjsx syntaxを使用します

注：

デフォルトのパラマが設定されていない場合、現在の作業ディレクトリは、./SVGディレクトリに出力を持つ.SVGファイルへのパスとして使用されます。

.SVGファイルを含むサブディレクトリは、出力パスのサブディレクトリ内に対応する反応成分を生成します。

出力パスには、生成されたすべてのコンポーネントをエクスポートするindex.jsが含まれています。

ReactJS：

JSX/TSX/CJSXファイルで生成されたコンポーネントを使用します。

 [ ... ]

import Pic from './svgComponents/Pic'

class MyComponent extends Component {
  render ( ) {
    return (
      < div >
        < Pic width = { 300 } height = { 100 } />
        < p > Lorem ipsum... </ p >
      </ div >
    ) ;
  }
}

[ ... ] 

TODO：

• ターゲットコンポーネントディレクトリにインデックスファイルを作成します。
  • インデックスに複製コンポーネント名が存在する場合は警告を提供します。
• ターゲットコンポーネントディレクトリの既存のファイルを比較します。