vite-plugin-supericon v0.0.3

vite-plugin-supericon

中文

Converts svg solid colour icons in a project to font icons and provides an interactive interface. The core is implemented by fantasticon.

✨ 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.

📦 Install

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.

// 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

// 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

😀 Iconify IntelliSense Support

Configure vscode settings for the workspace.

// .vscode/setting.json
{
  "iconify.customCollectionJsonPaths": ["node_modules/.supericon/iconify.json"]
}

Options

License

MIT licenses