svg-component-library-creator

SVG Component Library Creator

CLI Powered by Gluegun

SVG transformer powered by SVGR

Create a beautiful 💅 and type-safe 🔐 React ⚛️ and React Native📱 Icon library with one single command.

Supports Typescript ✅ and Javascript ✅

Fully Open Source, and Contributors Welcome 👋

• 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

• Locate the parent folder with all the svgs
• 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
• Follow through the promps until the success message is displayed
• 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

Commands	Description	Parameters
create, c	Converts multiple svg files into a single react component	* [ FOLDER_NAME ]
help, h	Displays all available commands
version, v	Displays current version

*- optional parameter

Got an issue or have an idea? Create an Issue