https://github.com/envato/create-react-icon
Convert one or multiple svg files into React component
https://github.com/envato/create-react-icon
Last synced: about 1 year ago
JSON representation
Convert one or multiple svg files into React component
- Host: GitHub
- URL: https://github.com/envato/create-react-icon
- Owner: envato
- License: mit
- Created: 2016-12-04T23:32:28.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2021-04-29T19:21:12.000Z (about 5 years ago)
- Last Synced: 2025-03-23T23:27:19.036Z (about 1 year ago)
- Language: JavaScript
- Size: 18.6 KB
- Stars: 13
- Watchers: 67
- Forks: 3
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# create-react-icon
[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Downloads][downloads-image]][downloads-url]
[![js-standard-style][standard-image]][standard-url]
Convert one or multiple svg files into inline-svg React component, inspired by [react-icons](https://github.com/gorangajic/react-icons) project.
If you are wondering what the benefit is to use inline svg in React component, please check this post [Creating an SVG Icon System with React](https://css-tricks.com/creating-svg-icon-system-react/).
## Installation
```sh
$ npm install create-react-icon -g
```
## Usage
```sh
$ create-react-icon ./alert.svg dist
$ create-react-icon ./*.svg dist
```
## Result
Your source svg file:
```xml
```
Becomes to :
```js
import React from 'react'
import Icon from 'react-icon-base'
export default (props) => {
return (
{props.title || 'alert'}
)
}
```
## How to use icons
```js
import AlertIcon from 'alertIcon'
export default (props) => {
return (
Manage my Collections
)
}
```
## Roadmap
* Make the base component configurable
## License
MIT
[npm-image]: https://img.shields.io/npm/v/create-react-icon.svg?style=flat-square
[npm-url]: https://npmjs.org/package/create-react-icon
[travis-image]: https://img.shields.io/travis/envato/create-react-icon/master.svg?style=flat-square
[travis-url]: https://travis-ci.org/envato/create-react-icon
[downloads-image]: http://img.shields.io/npm/dm/create-react-icon.svg?style=flat-square
[downloads-url]: https://npmjs.org/package/create-react-icon
[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
[standard-url]: https://github.com/feross/standard