{"id":16794792,"url":"https://github.com/pedronauck/reicons","last_synced_at":"2025-07-25T09:10:19.185Z","repository":{"id":57096388,"uuid":"67641420","full_name":"pedronauck/reicons","owner":"pedronauck","description":"💅 Bundle your SVG into a fully customized React components","archived":false,"fork":false,"pushed_at":"2019-06-06T13:40:17.000Z","size":135,"stargazers_count":112,"open_issues_count":9,"forks_count":17,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-30T08:40:02.113Z","etag":null,"topics":["cli","icons","node","react","svg-icons"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pedronauck.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-07T20:34:14.000Z","updated_at":"2024-03-21T17:14:06.000Z","dependencies_parsed_at":"2022-08-22T19:41:05.111Z","dependency_job_id":null,"html_url":"https://github.com/pedronauck/reicons","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronauck%2Freicons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronauck%2Freicons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronauck%2Freicons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronauck%2Freicons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pedronauck","download_url":"https://codeload.github.com/pedronauck/reicons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243841204,"owners_count":20356441,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","icons","node","react","svg-icons"],"created_at":"2024-10-13T09:14:35.826Z","updated_at":"2025-03-17T03:30:49.195Z","avatar_url":"https://github.com/pedronauck.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![GitHub release](https://img.shields.io/github/release/pedronauck/reicons.svg)]()\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"./resources/logo.png\" title=\"Reicons\" /\u003e\u003c/p\u003e\n\n# 🤔 \u0026nbsp; What is it?\n\nIf 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.\n\nReicons is a simple CLI tool that helps you to manage and use your icons quickly and easily.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://d17oy1vhnax1f7.cloudfront.net/items/2L280T3Y340G0L3H0s1Z/reicons.gif\" title=\"Gif Example\" width=\"100%\" /\u003e\u003c/p\u003e\n\n# 👌 \u0026nbsp; Advantages\n\n- [x] Require your icons as a simple React component\n- [x] Customize your icons with just css or inline styles\n- [x] Resize them in a prop way\n- [x] No `.svg`, `.png` or `.jpg` inside your bundle\n\nThat's great no? See more information above about how to use!\n\n# 🔌 \u0026nbsp; Install\n\nThe first thing that you need to do to use Reicons is install it globally or as a dependency at your project:\n\n```bash\n$ yarn [global] add reicons\n```\n\nAfter that you can see it working:\n\n```bash\n$ reicons --help\n\nreicons -p [\u003cpackage-dir:package-prefix\u003e] -s \u003cdir\u003e -b \u003cdir\u003e\n\nOptions:\n  --version       Show version number                     [boolean]\n  --packages, -p  Your svg icons packages                 [array]\n  --src, -s       Directory with the icons folder         [string]\n  --build, -b     Build directory                         [string]\n  --help          Show help                               [boolean]\n```\n\n# 💻 \u0026nbsp; Example\n\nLet'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:\n\n```bash\n$ cd example/default\n$ reicons -p font-awesome:fa icons:ic -s images -b components/Icons\n```\n\nAfter this command, Reicons will generate our components in a folder structure like that:\n\n```bash\n.\n└── components\n    └── Icons\n        └── index.js\n```\n\nWith that you can just import your icons as a simple React component:\n\n```jsx\nimport { FaBook } from './components/Icons';\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003cFaBook /\u003e\n  \u003c/div\u003e\n);\n```\n\nor import the entiry bundled icons and define what you want passing a prop `name`\n\n```jsx\nimport Icon from './components/Icons';\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003cIcon name=\"FaBook\" /\u003e\n  \u003c/div\u003e\n);\n```\n\n# ⚙ \u0026nbsp; Usage\n\nYou 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.\n\nSo, to bundle your icons you need to pass three arguments: `--package`, `--src` and `--build`.\n\n### `--package`\n\nOne 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.\n\nThe default style to write your package is: `\u003cpackage-directory\u003e:\u003cpackage-prefix\u003e`\n\nThe `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.\n\n### `--src`\n\nThe source directory when your packages folder is.\n\n### `--build`\n\nThe build directory when you want to create your components.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedronauck%2Freicons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpedronauck%2Freicons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedronauck%2Freicons/lists"}