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.
withSvg
HOC<script setup>
SFCssize
, color
, strokeWidth
, fill
, title
, aria-hidden
, role
npm install
.svg
iconsPut 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 once
import { 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.