1.0.3 β€’ Published 4 years ago

svg-component-library-creator v1.0.3

Weekly downloads
1
License
MIT
Repository
-
Last release
4 years ago

β€’ Why?

One day I was working on a React Native application, and I had to transfer over about 25 some icons. I was dreading doing this, as I had to go in one by one and copying the necessary SVG code and pasting it... Then I noticed a pattern... I figured out i could completly automate (partially) the creation of a very clean, and easy to understand component.

β€’ A MUST for React Native developers (especially beginners)

I remember a little bit over 6 months ago, I was tasked on increasing the load times of icons. Naturally, coming from a web developer background, i decided to look into using SVGs. Little did i know I would spend about a week or so trying to get those #&*&@! SVG files to load. At the end, I ended up creating this horrible system where i had to manually paste the code in individual js files... at the end we ended up having around 30 js files JUST for icons.

This CLI helps newbie developers be able to integrate SVG icons with the press of the button.

β€’ How to use

  1. Locate the parent folder with all the svgs
  2. Run npx svg-component-library-creator create [FOLDER_NAME] or npx svg-clc c [FOLDER_NAME]
    • If no folder name is provided, the CLI will search for svgs as a default folder
  3. Follow through the promps until the success message is displayed
  4. Move or Copy/Paste your brand new Icons.tsx (Icons.js if using Vanilla JS) to your project!

Added new icons to your library?? Just run the command again and as long as all file names stayed the same there will be 0 naming issues!!

  • Commands

CommandsDescriptionParameters
create, cConverts multiple svg files into a single react component* FOLDER_NAME
help, hDisplays all available commands
version, vDisplays current version

*- optional parameter

*Got an issue or have an idea? Create an Issue*