SVG Component Converter

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

Installation

npm 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

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