@waset/unplugin-iconify

1,799 2
vite nuxt unplugin transform webpack icons icon esbuild astro loader rollup rspack unocss farm iconify
Install
npm install @waset/unplugin-iconify
Latest Version:1.4.0
Vue:3
License:MIT
Last Updated:Oct 26, 2026
Links: GitHub  ·  npm
Maintainer: waset

unplugin-iconify

NPM version

安装

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 */),
      },
    }),
  ],
  // ...
})

感谢

Related Packages

@styleframe/plugin

Unplugin for Styleframe. Use it with Vite, Webpack, Astro, Nuxt, Rollup, Rspack,...

24,920 91
astro nuxt rollup rspack transform unplugin vite webpack styleframe
unplugin-strip-whitespace

Unplugin to strip inter-node whitespace in Astro and Svelte templates (Vite/Roll...

787 0
astro esbuild farm nuxt rollup rspack unplugin vite webpack minify +2
unplugin-kubb

Integration of Kubb for Vite, webpack, Rollup, Rolldown, Rspack, esbuild, Farm,...

328,886 1,825
astro esbuild farm nuxt rollup rspack unplugin vite webpack codegen +3
@vue.ts/complex-types

Resolve complex types in Vue SFCs.

11,656 112
astro farm nuxt rollup rspack transform unplugin vite webpack rolldown +3
@relevate/unplugin-poolster

Run Poolster OpenAPI generation from Vite, Rollup, webpack, esbuild, Rspack, Rol...

197 3
astro esbuild farm nuxt rollup rspack unplugin vite webpack codegen +3

Version History

Version Released Vue License
1.4.0 ^3.0 MIT
1.3.2 ^3.0 MIT
1.3.0 ^3.0 MIT
1.2.0 ^3.0 MIT
1.1.1 ^3.0 MIT