msvgc

MSVGC

UTIL для генерации компонентов React из простых файлов SVG
(совместим с реакцией-родным)

Установить:

 # install package globally
npm install -g msvgc

Использование:

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

-Флаг --camelCase создает компоненты с именами классов верблюдов

--react-native флаг создает компоненты с использованием библиотеки React-Cniate-SVG

--color флаг создает реагирующие компоненты с цветными реквизитами, передаваемым детской заливке SVG

--typescript Flag будет использовать операторы импорта TypeScript, например ( import * as React )

--coffeescript Flag будет использовать синтаксис CofeeScript CJSX для создания компонентов

Примечания:

Если параметры по умолчанию не установлены, текущий рабочий каталог будет использоваться в качестве пути к файлам .svg с выводом в каталоге ./svg.

Подкатализаторы, содержащие файлы .svg, будут генерировать свои соответствующие компоненты React в подкаталоге в выходном пути.

Выходной путь содержит индекс.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 >
    ) ;
  }
}

[ ... ] 

Тодо:

• Создайте файл индекса в каталоге целевых компонентов.
  • Обеспечить предупреждение, когда в индексе существуют дублирующие имена компонентов.
• Сравните существующие файлы в каталоге целевых компонентов.