1.0.2 • Published 4 years ago
svg-component-converter v1.0.2
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