0.4.7 ā€¢ Published 7 years ago

reicons v0.4.7

Weekly downloads
28
License
MIT
Repository
github
Last release
7 years ago

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

  • Require your icons as a simple React component
  • Customize your icons with just css or inline styles
  • Resize them in a prop way
  • 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.

0.4.7

7 years ago

0.4.6

7 years ago

0.4.5

7 years ago

0.4.4

7 years ago

0.4.3

7 years ago

0.4.2

7 years ago

0.4.1

7 years ago

0.4.0

7 years ago

0.3.3

7 years ago

0.3.2

7 years ago

0.3.1

7 years ago

0.3.0

7 years ago

0.2.3

7 years ago

0.2.2

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago

0.0.3

7 years ago

0.2.0-beta.1

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago