@alexghi/reicons
CLI tool to generate React icons component using svg files
Last updated 3 years ago by alexghi .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @alexghi/reicons -g
SYNC missed versions from official npm registry.

GitHub release

????   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:

$ yarn [global] add reicons

After that you can see it working:

$ reicons --help

reicons -p [<package-dir:package-prefix>] -s <dir> -b <dir>

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 as example. There's we have an images folder that have two folders font-awesome and 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:

$ 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:

.
└── components
    └── Icons
        └── index.js

With that you can just import your icons as a simple React component:

import { FaBook } from './components/Icons';

const App = () => (
  <div>
    <FaBook />
  </div>
);

or import the entiry bundled icons and define what you want passing a prop name

import Icon from './components/Icons';

const App = () => (
  <div>
    <Icon name="FaBook" />
  </div>
);

⚙   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: <package-directory>:<package-prefix>

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.

Current Tags

  • 0.1.1                                ...           latest (3 years ago)

1 Versions

  • 0.1.1                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 1
Last Month 3
Dependencies (10)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |