svg-to-component
v1.2.4
Published
Convert SVG to React/Vue components
Downloads
92
Readme
svg-to-component
Install
yarn add svg-to-component
Usage
const Svg2Component = require('svg-to-component')
// Generate React component from SVG string
new Svg2Component()
//...........svg string, component name
.fromString('<svg ...', 'MyIcon')
.toReactComponent()
// export default function MyIcon(props) {
// return <svg ...>
// }
// You can also directly generate component from an SVG file
new Svg2Component()
.fromFileSync('./my-icon.svg', 'optional-component-name')
.toVueComponent()
API
const svg2component = new Svg2Component()
svg2component.fromString(str, name)
str
SVG string.
name
Could be either of:
- Component name, either in
kebab-case
orPascalCase
. - File path, we extract component name from it.
svg2component.fromFile(filename, [name])
Return a Promise.
filename
Path to SVG file.
name
Component name.
svg2component.fromFileSync(filename, [name])
Like .fromFile
but sync and return this
svg2component.toReactComponent([opts])
Return a string which represents a React component.
opts
transformJSX
Type: boolean
Default: true
svg2component.toVueComponent([opts])
Return a string which represents a Vue component.
opts
transformJSX
Type: boolean
Default: true
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Author
svg-to-component © EGOIST, Released under the MIT License. Authored and maintained by EGOIST with help from contributors (list).
github.com/egoist · GitHub @EGOIST · Twitter @_egoistlily