Convert SVG to React/Vue components

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 or PascalCase.
• 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

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Download Details:

Author: egoist

GitHub: https://github.com/egoist/svg-to-component

#vuejs #javascript #vue #react