vite+vue3中如何使用iconify图标库

前言`

Iconify支持100多个图标集，上万种图标可随意使用，你能想到的他都有，Iconify是SVG图标，不是字体图标，所以你也可以结合elementui-plus使用，最后感谢antfu大佬提供的vite插件。

---

一、下载插件

pnpm add -D unplugin-icons

二、使用方式

1.安装完整集合

代码如下（示例）：

pnpm add -D @iconify/json

// vite.config.ts
import Icons from 'unplugin-icons/vite'

export default defineConfig({
  plugins: [
    Icons({ /* options */ }),
  ],
})

说明：@iconify/json（~120MB）包括Iconify中的所有图标集，因此您可以安装一次并根据需要使用其中任何图标（只有您实际使用的图标才会捆绑到生产版本中）。

2.按图标集安装

如果你想单独安装它们单独的安装他们，可以使用此规则：@iconify-json/[collection-id]
比如安装 Material Design Icons

pnpm add -D @iconify-json/mdi

3.自动安装

下载 unplugin-vue-components

pnpm add -D unplugin-vue-components

// vite.config.js
import Vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'

export default {
  plugins: [
    Vue(),
    Components({
      resolvers: [
        IconsResolver(),
      ]
    }),
    Icons({ autoInstall: true }),
  ],
}

4.使用

i-图标集-标图名

<i-carbon-accessibility />
// 或
<el-icon :size="20">
    <i-carbon-accessibility />
</el-icon>