svg-to-react-vue-angular-svelte-component Svelte Themes

Svg To React Vue Angular Svelte Component

๐Ÿ”ง Convert SVG icons into framework-friendly components for React, Vue, Svelte, and Angular โ€” accessible, customizable, and type-safe.

svg-to-react-vue-angular-svelte-component

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.


โœจ Features

  • ๐Ÿง  Framework-agnostic SVG parser
  • โš›๏ธ React components using a custom withSvg HOC
  • ๐Ÿ”ฅ 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

๐Ÿš€ Usage

1. Install

npm install

2. Add your .svg icons

Put them in:

src/icons-svg/

3. Run Generators

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 Examples

โœ… React

import { AddIcon } from "@/components/icons"
<AddIcon size={24} color="blue" title="Add" />

โœ… Vue

<AddIcon size="32" color="red" title="Add item" />

โœ… Svelte

<AddIcon size={20} color="green" title="Submit" />

โœ… Angular

<icon-add [size]="28" color="purple" [title]="'Delete'" />

๐Ÿ’ก Icon Props (All Frameworks)

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

"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"
}

๐Ÿ“ƒ License

MIT


๐Ÿ™Œ Credits

Built with โค๏ธ to streamline icon usage across modern frontend frameworks.

Top categories

Loading Svelte Themes