yarn add svg-to-component
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()
const svg2component = new Svg2Component()
SVG string.
Could be either of:
- Component name, either in
kebab-case
orPascalCase
. - File path, we extract component name from it.
Return a Promise.
Path to SVG file.
Component name.
Like .fromFile
but sync and return this
Return a string which represents a React component.
Type: boolean
Default: true
Return a string which represents a Vue component.
Type: boolean
Default: true
- 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
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