# vite-plugin-supericon > vite plugin of auto generate iconfont from svg Latest version **0.0.6** (published 2025-12-20) · MIT license · 0 weekly downloads ## Install ```sh npm install vite-plugin-supericon pnpm add vite-plugin-supericon yarn add vite-plugin-supericon bun add vite-plugin-supericon ``` ## Health **Score 55/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. ## Facts | | | |---|---| | Version | 0.0.6 | | Published | 2025-12-20 | | First published | 2024-03-17 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 5 | | Unpacked size | 425.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | dh | | Maintainers | yue1123 | | Keywords | vite, vite-plugin, plugin, icon, iconfont, svg convert, svg icon, super icon | ## Links - npm: https://www.npmjs.com/package/vite-plugin-supericon - Repository: https://github.com/yue1123/vite-plugin-supericon - Issues: https://github.com/yue1123/vite-plugin-supericon/issues - npm.io page: https://npm.io/package/vite-plugin-supericon ## Dependencies (5) - [open](https://npm.io/package/open.md) ^10.0.4 - [sirv](https://npm.io/package/sirv.md) ^2.0.4 - [fs-extra](https://npm.io/package/fs-extra.md) ^11.2.0 - [picocolors](https://npm.io/package/picocolors.md) ^1.0.0 - [@twbs/fantasticon](https://npm.io/package/@twbs/fantasticon.md) ^3.0.0 ## Alternatives - [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads - [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads - [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads - [stockfish](https://npm.io/package/stockfish.md) — 27.0K weekly downloads - [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads ## Recent versions - 0.0.6 (latest) — 2025-12-20 - 0.0.5 — 2025-02-12 - 0.0.4 — 2025-01-02 - 0.0.3 — 2024-03-24 - 0.0.2 — 2024-03-19 - 0.0.1 — 2024-03-17 ## README # vite-plugin-supericon ![icon list](./screenshots/icon-list.jpg) ![npm](https://img.shields.io/npm/v/vite-plugin-supericon?style=flat-square) ![npm](https://img.shields.io/npm/dm/vite-plugin-supericon?style=flat-square) ![GitHub](https://img.shields.io/github/license/yue1123/vite-plugin-supericon?style=flat-square) [中文](./README.zh.md) Converts svg solid colour icons in a project to font icons and provides an interactive interface. The core is implemented by [fantasticon](https://github.com/tancredi/fantasticon#readme). ## ✨ Features 1. Easily configurable with just one line. 2. Automatically converts SVG to Iconfont. 3. Provides a beautiful interactive user interface. 4. Quick copy icon code functionality. 5. Supports comparison between original and rendered images, allowing for quick difference checking. 6. Intelligent prompting for duplicate icons. 7. Multiple icon sorting and filtering options. 8. Supports previewing generated icons in VSCode [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify). ## 📦 Install ```shell npm i vite-plugin-supericon -D # yarn yarn add vite-plugin-supericon -D # pnpm pnpm add vite-plugin-supericon -D ``` ## 🦄 Usage 1. Add and configure the superIcon plugin to `vite.config.js` / `vite.config.ts`. ```ts // vite.config.js / vite.config.ts import { superIcon } from 'vite-plugin-supericon' export default { plugins: [ superIcon({ srcDir: './src/assets/icons' }) ] } ``` 2. Introducing modules in the entry file ```ts // main.ts / main.js import 'virtual:supericon' ``` 3. Then run the service, click on the link in the terminal or open `localhost:5173/__supericon/` to access the interactive interface. > The full demo can be found at [demo](./demo/) ## 😀 Iconify IntelliSense Support Configure vscode settings for the workspace. ```json // .vscode/setting.json { "iconify.customCollectionJsonPaths": ["node_modules/.supericon/iconify.json"] } ``` ## Options | Property | Type | Partial | Default | Description | | ----------- | ------- | ------- | ----------------------- | --------------------------------------------------------------------------------------------------------- | | srcDir | string | no | | Svg icons source folder. | | base | string | yes | read from Vite's config | Base URL for superIcon UI | | clearCache | boolean | yes | `true` | clear cache pre server start | | watch | boolean | yes | `true` | Watch srcDir files change | | open | boolean | yes | `false` | Automatically open super icon page in browser | | silent | boolean | yes | `false` | Print URL output silently in the terminal | | name | string | yes | `iconfont` | Name of icons font | | prefix | string | yes | `icon` | Icon css class prefix | | fontHeight | number | yes | `300` | the output font height (icons will be scaled so the highest has this height) | | descent | number | yes | | font descent | | round | number | yes | `icon` | setup the SVG path rounding [10e12] | | selector | string | yes | `null` | use a CSS selector instead of 'tag + prefix' | | tag | string | yes | `null` | CSS base tag for icons | | cssTemplate | string | yes | `i` | Use a custom [Handlebars](https://handlebarsjs.com/) template file to generate css file(template file path) | | normalize | boolean | yes | `true` | normalize icons by scaling them to the height of the highest icon | ## License [MIT licenses](https://opensource.org/licenses/MIT) --- _Source: https://npm.io/package/vite-plugin-supericon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._