https://github.com/pedronauck/reicons
💅 Bundle your SVG into a fully customized React components
https://github.com/pedronauck/reicons
cli icons node react svg-icons
Last synced: 11 months ago
JSON representation
💅 Bundle your SVG into a fully customized React components
- Host: GitHub
- URL: https://github.com/pedronauck/reicons
- Owner: pedronauck
- Created: 2016-09-07T20:34:14.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2019-06-06T13:40:17.000Z (about 7 years ago)
- Last Synced: 2024-10-30T08:40:02.113Z (over 1 year ago)
- Topics: cli, icons, node, react, svg-icons
- Language: JavaScript
- Homepage:
- Size: 132 KB
- Stars: 112
- Watchers: 4
- Forks: 17
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[]()
# 🤔  What is it?
If you work with React, you know that the library enables you to manage and use your icons in a lot a ways. This is good because you have flexibility to manage them as you want. So, in many cases this workflow can become a manual and massive process that you need to do so many times.
Reicons is a simple CLI tool that helps you to manage and use your icons quickly and easily.
# 👌  Advantages
- [x] Require your icons as a simple React component
- [x] Customize your icons with just css or inline styles
- [x] Resize them in a prop way
- [x] No `.svg`, `.png` or `.jpg` inside your bundle
That's great no? See more information above about how to use!
# 🔌  Install
The first thing that you need to do to use Reicons is install it globally or as a dependency at your project:
```bash
$ yarn [global] add reicons
```
After that you can see it working:
```bash
$ reicons --help
reicons -p [] -s -b
Options:
--version Show version number [boolean]
--packages, -p Your svg icons packages [array]
--src, -s Directory with the icons folder [string]
--build, -b Build directory [string]
--help Show help [boolean]
```
# 💻  Example
Let's use the [default example folder](./example/default) as example. There's we have an `images` folder that have two folders [font-awesome](./example/default/font-awesome) and [icons](./example/default/icons) with a lot of svg files inside. So, we want to build our components at folder `components/Icons`. To do that, we can run:
```bash
$ cd example/default
$ reicons -p font-awesome:fa icons:ic -s images -b components/Icons
```
After this command, Reicons will generate our components in a folder structure like that:
```bash
.
└── components
  └── Icons
  └── index.js
```
With that you can just import your icons as a simple React component:
```jsx
import { FaBook } from './components/Icons';
const App = () => (
);
```
or import the entiry bundled icons and define what you want passing a prop `name`
```jsx
import Icon from './components/Icons';
const App = () => (
 Â
);
```
# âš™ Â Usage
You need to know just few things to use the tool. As you've seen above, Reicons need to read a list of svg icons and know where you want to bundle your components.
So, to bundle your icons you need to pass three arguments: `--package`, `--src` and `--build`.
### `--package`
One or more packages that you will use as icons. This argument has a default style to write, because we need it to find and create your svg files.
The default style to write your package is: `:`
The `package-directory` is the folder name of your svg icons and the `package-prefix` is the name that we will use to prefix your components.
### `--src`
The source directory when your packages folder is.
### `--build`
The build directory when you want to create your components.