SVG Component Converter

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

Installation

1npm i svg-component-converter -g

Usage

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]

Allowed Arguments

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

---

Examples

Open CLI

1svgcc

Get help

1svgcc help

Convert file with defaults

1# first arg must be path to svg
2svgcc ./path/to/image.svg
3
4# .svg not required this will also work
5svgcc ./path/to/image

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

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

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

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

---