https://github.com/egoist/svg-to-component
Convert SVG to React/Vue components
https://github.com/egoist/svg-to-component
component react svg vue
Last synced: about 1 year ago
JSON representation
Convert SVG to React/Vue components
- Host: GitHub
- URL: https://github.com/egoist/svg-to-component
- Owner: egoist
- License: mit
- Created: 2017-08-13T06:29:44.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2021-12-25T14:31:27.000Z (over 4 years ago)
- Last Synced: 2025-04-30T15:24:07.986Z (about 1 year ago)
- Topics: component, react, svg, vue
- Language: JavaScript
- Homepage:
- Size: 57.6 KB
- Stars: 40
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svg-to-component
[](https://npmjs.com/package/svg-to-component) [](https://npmjs.com/package/svg-to-component) [](https://circleci.com/gh/egoist/svg-to-component/tree/master) [](https://github.com/egoist/donate)
## Install
```bash
yarn add svg-to-component
```
## Usage
```js
const Svg2Component = require('svg-to-component')
// Generate React component from SVG string
new Svg2Component()
//...........svg string, component name
.fromString('
// }
// You can also directly generate component from an SVG file
new Svg2Component()
.fromFileSync('./my-icon.svg', 'optional-component-name')
.toVueComponent()
```
## API
```js
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](https://github.com/egoist), Released under the [MIT](./LICENSE) License.
Authored and maintained by EGOIST with help from contributors ([list](https://github.com/egoist/svg-to-component/contributors)).
> [github.com/egoist](https://github.com/egoist) · GitHub [@EGOIST](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)