Svg-component-converter NPM

SVG Component Converter

CLI tool that converts SVG files into react or vue components.

npm i svg-component-converter -g

Note: The first argument must always be the path to the svg from your current directory. All other arguments can be listed in any order

svgcc [path] [args]

Name	Usage	Default	Description
Help	`help`	N/A	Print help menu
Spaces	`[NUMBER]`	`2`	Number of indentation spaces
Attr New Line	`attributeNewLine`	`false`	Add linebreak after each element's attributes
Ignore Eslint	`ignoreEslint`	`false`	Add / eslint-disable / to top of output file
Framework	`vue` or `react`	`react`	Output either a vue or react component
Inject Class	`injectClass`	`false`	Inject a class or className property into the components props
Replace File	`replaceFile`	`false`	Replace the original svg with the output component instead of keeping it
Closing Space	`spaceBeforeClose`	`false`	Add space before self closing tag

Open CLI

svgcc

Get help

svgcc help

Convert file with defaults

# first arg must be path to svg
svgcc ./path/to/image.svg

# .svg not required this will also work
svgcc ./path/to/image

Convert file with 4 spaces to vue component and replace original file

# Arg order does not matter (as long as path is first)
svgcc ./path/to/image vue 4 replaceFile

Convert file to react component, break lines for attributes, ignore eslint and inject a class

svgcc ./path/to/image.svg attributeNewLine react ingoreEslint injectClass

6 years ago

6 years ago

6 years ago