https://github.com/waset/unplugin-iconify
🔥 按目录解析 svg 文件并打包为 iconify json，通过 unplugin 开发，支持多个打包工具，适配 vscode、unocss 等
https://github.com/waset/unplugin-iconify
iconify nuxt unocss unplugin vite vscode webpack
Last synced: 5 months ago
JSON representation
🔥 按目录解析 svg 文件并打包为 iconify json，通过 unplugin 开发，支持多个打包工具，适配 vscode、unocss 等
- Host: GitHub
- URL: https://github.com/waset/unplugin-iconify
- Owner: waset
- License: mit
- Created: 2024-10-17T09:02:43.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-04T14:11:58.000Z (9 months ago)
- Last Synced: 2025-04-04T15:24:49.472Z (9 months ago)
- Topics: iconify, nuxt, unocss, unplugin, vite, vscode, webpack
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@waset/unplugin-iconify
- Size: 307 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# unplugin-iconify
[](https://www.npmjs.com/package/@waset/unplugin-iconify)
## 安装
```bash
pnpm i -D @waset/unplugin-iconify
```
## 使用
```ts
Iconify({
/**
* 工作区路径
* @description 项目根目录
* @default process.cwd()
*/
workspace: cwd(),
/**
* 图标转换配置
*/
convert: {
// 直接导出目录
svg: 'assets/icons',
// 不导出颜色
icon: {
path: 'assets/icons',
noColor: true,
},
// 不导出颜色且添加后缀
suffix: {
path: 'assets/icons',
noColor: true,
suffix: 'color',
},
},
/**
* 输出目录
* @type string
* @default `path.join(process.cwd(), 'node_modules/.unplugin-iconify')`
*/
output: 'dist/icons',
/**
* 是否适配 VSCode 插件 Iconify IntelliSense
* @type boolean | string
* @default false
*/
iconifyIntelliSense: true,
})
```
#### 补充
- 如果开启 `iconifyIntelliSense`将自动创建/更新 `.vscode/settings.json` 文件，用于 VSCode 插件 [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify)
- 请查看 [`src/core/types.ts`](https://github.com/waset/unplugin-iconify/blob/main/src/core/types.ts) 获取更多类型信息。
#### 用例
> 参照上述 `convert` 配置，如果拥有 `assets/icons/cat.svg`,将会生成以下 `iconify` 图标
- `icon-cat` `icon:cat` `i-icon-cat`
- `svg-cat` `svg:cat` `i-svg-cat`
- `suffix-cat-color` `suffix:cat-color` `i-suffix-cat-color`
## 配置
Vite
```ts
// vite.config.ts
import Iconify from '@waset/unplugin-iconify/vite'
export default defineConfig({
plugins: [
Iconify({
// ...
})
],
})
```
Nuxt
```ts
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config'
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
modules: [
// ...
'@waset/unplugin-iconify/nuxt'
],
Iconify: {
// ...
},
})
```
Unocss
```ts
// uno.config.ts
import { UnocssLoader } from '@waset/unplugin-iconify/loader'
import { defineConfig, presetIcons } from 'unocss'
export default defineConfig({
presets: [
// ...
presetIcons({
scale: 1.2,
warn: true,
extraProperties: {
'display': 'inline-block',
'vertical-align': 'middle',
},
collections: {
...UnocssLoader(/** output */),
},
}),
],
// ...
})
```
## 感谢
- [unplugin](https://github.com/unjs/unplugin)
- [unplugin/unplugin-icons](https://github.com/unplugin/unplugin-icons)
- [unocss](https://unocss.dev/presets/icons)