1. svg-to-component

svg-to-component

svg-to-component

NPM version NPM downloads CircleCI donate

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

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