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 플래그는 낙타 케이스 클래스 이름으로 구성 요소를 만듭니다

--react-native 플래그는 React-Native-SVG 라이브러리를 사용하여 구성 요소를 만듭니다

--color 플래그는 SVG Children 's Fill Prop에 전달 된 컬러 소품으로 반응-네이티브 구성 요소를 만듭니다.

--typescript 플래그는 TypeScript 가져 import * as React 문을 사용합니다.

--coffeescript 플래그는 Coffeescript CJSX 구문을 사용하여 구성 요소를 작성합니다.

참고 :

기본 매개 변수가 설정되지 않으면 현재 작업 디렉토리는 ./svg 디렉토리에 출력이있는 .SVG 파일의 경로로 사용됩니다.

.SVG 파일을 포함하는 하위 디렉토리는 출력 경로의 하위 디렉토리 내에서 해당 반응 구성 요소를 생성합니다.

출력 경로에는 생성 된 모든 구성 요소를 내보내는 index.js가 포함되어 있습니다.

REACT JS :

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 :

• 대상 구성 요소 디렉토리에서 인덱스 파일을 만듭니다.
  • 인덱스에 중복 구성 요소 이름이 존재할 때 경고를 제공하십시오.
• 대상 구성 요소 디렉토리의 기존 파일을 비교하십시오.