Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (re-svgify) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🚀 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! 🎨💡

re-svgify