Convert your SVG icons (e.g. from Figma) into reusable components for React, Vue, Svelte, and Angular β all with proper props, accessibility support, and TypeScript.
- π§ Framework-agnostic SVG parser
- βοΈ React components using a custom
withSvgHOC - π₯ Vue 3
<script setup>SFCs - π Svelte components with full reactivity
π °οΈ Angular standalone components- π¨ All icons support
size,color,strokeWidth,fill,title,aria-hidden,role - π§Ή Cleans output directories before generation
- π¦ Outputs tree-shakable files with named exports
npm install
Put them in:
src/icons-svg/
npm run generate:react
npm run generate:vue
npm run generate:svelte
npm run generate:angular
npm run generate:all # To generate all at onceimport { AddIcon } from "@/components/icons" <AddIcon size={24} color="blue" title="Add" />
<AddIcon size="32" color="red" title="Add item" /><AddIcon size={20} color="green" title="Submit" />
<icon-add [size]="28" color="purple" [title]="'Delete'" />
| Prop | Type | Description |
|---|---|---|
size |
number |
Icon size in pixels |
color |
string |
Stroke color (currentColor default) |
strokeWidth |
number |
Stroke width (default: 1.5) |
fill |
string |
Fill color (none default) |
title |
string |
Accessible label (renders <title>) |
ariaHidden |
boolean |
Whether to hide from screen readers |
role |
string |
Accessibility role (img, presentation) |
"scripts": { "generate:react": "ts-node src/main.ts react", "generate:vue": "ts-node src/main.ts vue", "generate:svelte": "ts-node src/main.ts svelte", "generate:angular": "ts-node src/main.ts angular", "generate:all": "npm run generate:react && npm run generate:vue && npm run generate:svelte && npm run generate:angular" }
MIT
Built with β€οΈ to streamline icon usage across modern frontend frameworks.