pnpm i -D @waset/unplugin-iconify
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 -
请查看
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
// vite.config.ts
import Iconify from '@waset/unplugin-iconify/vite'
export default defineConfig({
plugins: [
Iconify({
// ...
})
],
})
Nuxt
// 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
// 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 */),
},
}),
],
// ...
})