{"_id":"@dalitaavanesian/reicons_ts","_rev":"2-2dee86c9424e51e5dd49fbf6728b51ce","name":"@dalitaavanesian/reicons_ts","dist-tags":{"latest":"0.5.9"},"versions":{"0.5.9":{"name":"@dalitaavanesian/reicons_ts","version":"0.5.9","description":"CLI tool to generate React icons component using svg files","bin":{"reicons":"bin/reicons.js"},"scripts":{"debug":"./bin/reicons.js -p font-awesome:fa icons:icon -s examples/default/images -b examples/default/components/Icons","publish":"npm publish --access public"},"repository":{"type":"git","url":"git+https://github.com/dalitaavanesian/reicons-1.git"},"license":"MIT","preferGlobal":true,"bugs":{"url":"https://github.com/dalitaavanesian/reicons-1/issues"},"homepage":"https://github.com/estevesd/reicons#readme","dependencies":{"async":"^2.3.0","chalk":"^1.1.3","cheerio":"^0.22.0","lodash":"^4.15.0","node-emoji":"^1.5.1","prop-types":"^15.5.8","shelljs":"^0.7.7","svgo":"^0.7.0","through2":"^2.0.1","yargs":"^7.1.0"},"gitHead":"866222e28d73b2bd27c43bfe9e7bae3cb017bdf3","_id":"@dalitaavanesian/reicons_ts@0.5.9","_nodeVersion":"12.14.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-r8K1qwNtx99g/kSqWZf4RqervPN3R1lXUHy7e5A2Gq6YTclHxTE/RUDxTy6urUIhrGQBdXNUYHY4ay98GrKxkw==","shasum":"b76c06e20863707695120ff3589ddfeba70cb50e","tarball":"https://registry.npmjs.org/@dalitaavanesian/reicons_ts/-/reicons_ts-0.5.9.tgz","fileCount":16,"unpackedSize":139173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzetxCRA9TVsSAnZWagAAhYQQAJWONEWPRZ3pRLsxvXIR\nZJFQELarFgsrNaR6DKgudjpEaEXR35kXtaIsCfrFEpyaSFT0YmhdAZtrdNZ8\nGfp/UaOVarFQdn7br/2wy7rnuq7JWTtLz5c5ASJKZESOB1h3cEis8F33IN4T\nGOApXjVZerCcZy8JZI6xd+kflOtGFeldJy5Frl1YN1Etf2ztLX8GLfgCpRqV\nmbF0qMnliGuPVUmFupVB+5GfvokMvKC0P853cR2ZK4MNweK1xaao1vXP5BG0\n6m3f15SUANuvJ2Z/D5JIY9flPZWafsgq+zwRTvZtq5geO8fWvc3dsx3+NsRu\nHhoMXEK0/4im39V+ikUg6HyzMcmxCMVOQBeihmJ3BPSvsBqLZHbPABDHb7Cm\nfN9KO6piMFWWAISM8HFL57HnaYOazQJKeR+NefTUWQxyv+c3iV0o95Q0dX5W\n7+Evm0pxal0aLd2kQi6YuvZoe0rRW9+sIyC+gIftzjjrugdu1K/HIlZhXie6\n5A80mBxAjWMC6di1BerosFA7w+N+rid0ZAxoMAsWJV/OaoqYAibgDIQNT6Uc\n1vR5Js3iiLpq3y6hkCnIo+kx70QWgGGdBDuRUEOm5cEZcyxPyL8jHEs4uOZv\nNxcCmlRGZvDoqbaCRUa5mvmdPstSQF4bjyjdM5KnZkF5VFjEJ1uwZjO4m5im\nE+FX\r\n=vzPv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsV5Q6wC9YbhmVLYH7dlnbBoUc11gfdX3JwpbyjtUcEwIgPhzJxw/1GnKOYXWYa9MNKjLaqvTlh2y1XDpp6FCcwXk="}]},"_npmUser":{"name":"dalitaavanesian","email":"dalita.avanessian@gmail.com"},"directories":{},"maintainers":[{"name":"dalitaavanesian","email":"dalita.avanessian@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/reicons_ts_0.5.9_1632835101107_0.794075096474919"},"_hasShrinkwrap":false}},"time":{"created":"2021-09-28T13:18:21.036Z","0.5.9":"2021-09-28T13:18:21.250Z","modified":"2022-04-05T02:38:14.539Z"},"maintainers":[{"name":"dalitaavanesian","email":"dalita.avanessian@gmail.com"}],"description":"CLI tool to generate React icons component using svg files","homepage":"https://github.com/estevesd/reicons#readme","repository":{"type":"git","url":"git+https://github.com/dalitaavanesian/reicons-1.git"},"bugs":{"url":"https://github.com/dalitaavanesian/reicons-1/issues"},"license":"MIT","readme":"[![GitHub release](https://img.shields.io/github/release/pedronauck/reicons.svg)]()\n\n

\n\n# šŸ¤”   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

\n\n# šŸ‘Œ   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# šŸ”Œ   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 [] -s -b \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# šŸ’»   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 = () => (\n
\n \n
\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 = () => (\n
\n Ā  Ā \n
\n);\n```\n\n# āš™   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: `:`\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","readmeFilename":"README.md"}