本文由 简悦 SimpRead 转码， 原文地址 juejin.cn

如果使用了unplugin-vue-components, 在plugins中配置了Components，里面的IconsResolver中的preifx的属性为'icon', 记得在图标引入的时候，在其前面要加icon; 例如复制的图标组件名为，需要这样使用，如果嫌麻烦。prefix的属性直接设置为空字符串

安装

pnpm add -D unplugin-icons

配置

vite.config.ts 配置:

import Icons from "unplugin-icons/vite";

plugins:[
    Icons({
      autoInstall: true,
      compiler: "vue3",
    }),
]

支持的配置

Icons({
  scale: 1.2, // Scale of icons against 1em
  defaultStyle: '', // Style apply to icons
  defaultClass: '', // Class names apply to icons
  compiler: null, // 'vue2', 'vue3', 'jsx'
  jsx: 'react' // 'react' or 'preact'
})

使用

在 icones.netlify.app / 网站上找到想使用的图标 点击下图所示的按钮，即可复制图标，如下图，当前查看的是 Element-plus 的图标

Icon 图标自动引入

这里需要配合 unplugin-vue-components 组件使用。

地址：github.com/antfu/unplu…

配置

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'

  plugins: [
    Components({
      resolvers: [
        IconsResolver({
          prefix: 'icon', // 自动引入的Icon组件统一前缀，默认为 i，设置false为不需要前缀
          // {prefix}-{collection}-{icon} 使用组件解析器时，您必须遵循名称转换才能正确推断图标。
          // alias: { park: 'icon-park' } 集合的别名
          enabledCollections: ['ep'] // 这是可选的，默认启用 Iconify 支持的所有集合['mdi']
        }),
      ]
    }),
    Icons({
      // scale: 1, // 缩放
      compiler: 'vue3', // 编译方式
      // defaultClass: '', // 默认类名
      // defaultStyle: '', // 默认样式
      autoInstall: true
      // jsx: 'react' // jsx支持
    }),
  ],

使用

注：使用 Icon 自动引入, 不需要下载图标库，系统会自动按需下载。

<IconEpFold class="v-icon" />
<icon-ep-fold class="v-icon" />

.v-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 1em;
}

.v-icon>svg {
  width: 100%;
  height: 100%;
}