re-svgify

🚀 re-svgify – Convert & Customize SVGs as React Components

re-svgify is a powerful tool that transforms your SVG files into optimized, fully customizable React components. No more manual conversions—just drop your SVGs in a folder and let re-svgify handle the rest!

🎨 Fully Customizable Icons

✔️ Change Colors – Modify fill and stroke dynamically using props.
✔️ Adjust Size – Set custom width and height for your icons.
✔️ All SVG Props Supported – Easily pass any SVG attribute like opacity, strokeWidth, className, etc.

🛠 Example: Dynamic Color & Size

<IconArrowDown fill="red" stroke="blue" width={48} height={48} />

✨ Features

• 📦 Automatic Conversion – Turns .svg files into React components (.tsx).
• 🎨 Customizable via Props – Modify icon colors, sizes, and styles dynamically.
• 🚀 Optimized Output – Minifies, cleans, and simplifies SVGs for better performance.
• 🏗 CamelCase Naming – Converts file names like icon-arrow-down.svg to IconArrowDown.tsx.
• 🔧 Flexible Configuration – Customize input/output directories.

📥 Installation

npm install -g re-svgify

⚡ Usage

• Place your SVG files inside the _icons/ folder in your project root.

• Run the CLI command:

  npx re-svgify
  

• Find your generated components inside components/icons/.

🛠 Example

🎨 Input (_icons/arrow-down.svg)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 19l-7-7h14z"/>
</svg>

🚀 Output (components/icons/IconArrowDown.tsx)

import BaseIcon from "../base-icon";
import { SvgIcon } from "../icon.types";

export default function IconArrowDown(props: SvgIcon) {
  return (
    <BaseIcon {...props}>
      <path d="M12 19l-7-7h14z" />
    </BaseIcon>
  );
}

🖌 Usage with Custom Styles

<IconArrowDown fill="green" stroke="black" strokeWidth={2} width={32} height={32} />

⚙️ Configuration

By default, re-svgify looks for _icons/ and outputs components to components/icons/. You can modify this in gulpfile.cjs.

To customize the output directory:

npx re-svgify --iconsFolder ./my-icons --componentsFolder ./src/components/icons

💡 Why Use re-svgify?

✅ Saves time – No more manual React conversions!
✅ Performance-focused – Minified, clean SVGs for better rendering.
✅ Fully customizable – Change colors, sizes, and styles dynamically.
✅ Zero setup – Just run and generate!

👩‍💻 Contributing

Found a bug? Have a feature request? Open an issue or contribute via PR!

📜 License

MIT License. Free to use, modify, and share.

🚀 Transform & customize your icons effortlessly with re-svgify! 🎨💡