https://github.com/maximalism2/msvgc
Make React components from your plain SVG files
https://github.com/maximalism2/msvgc
cli components react react-components react-naitve svg svg-files
Last synced: about 1 year ago
JSON representation
Make React components from your plain SVG files
- Host: GitHub
- URL: https://github.com/maximalism2/msvgc
- Owner: maximalism2
- Created: 2016-11-09T12:57:51.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-15T17:20:28.000Z (over 8 years ago)
- Last Synced: 2025-03-23T21:45:59.495Z (about 1 year ago)
- Topics: cli, components, react, react-components, react-naitve, svg, svg-files
- Language: JavaScript
- Homepage:
- Size: 52.7 KB
- Stars: 67
- Watchers: 2
- Forks: 14
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MSVGC
Utils for generating react components from plain svg files
*(compatible with react-native)*
### Install:
```bash
# install package globally
npm install -g msvgc
```
### Usage:
```bash
# provide for utils
msvgc -f ./path/to/pic.svg -o ./svgComponents/
```
`--camelCase` flag creates components with camel-case class names
`--react-native` flag creates components using [react-native-svg](https://github.com/react-native-community/react-native-svg) library
`--color` flag creates react-native components with color props passed to the svg children's fill prop
`--typescript` flag will use typescript import statements e.g. (`import * as React`)
`--coffeescript` flag will use CoffeeScript CJSX syntax for creating components
**Notes:**
If default params are not set, the current working
directory will be used as the path to .svg files with output in the ./svg directory.
Subdirectories containing .svg files will generate their corresponding react components within a subdirectory in the output path.
The output path contains an index.js that exports all generated components.
### React JS:
Use generated components in your jsx/tsx/cjsx files:
```js
[...]
import Pic from './svgComponents/Pic'
class MyComponent extends Component {
render() {
return (
Lorem ipsum...
);
}
}
[...]
```
#### TODO:
- [x] Create index file in target component directory.
- [ ] Provide warning when duplicate component names exist in the index.
- [ ] Compare existing files in target component directory.