图标是每个网站几乎都会用到的东西，下面我介绍一种在 vite 和 vue3 中使用 SVG 图标的方法。

unplugin-icons

unplugin-icons 是一款按需加载图标的插件

安装

npm i unplugin-icons -D

配置

复制图标文件到项目中

我们将 SVG 图标放在 src/assets/icons 目录下面，我这里是把 vue 和 vite 的图标拷贝到了里面（因为我不会画也懒得画）

.
├── .gitignore
├── index.html
├── package.json
├── package-lock.json
├── public
│   └── vite.svg
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── icons
│   │   │   ├── vite.svg
│   │   │   └── vue.svg
│   │   └── vue.svg
│   ├── main.ts
│   ├── style.css
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

更新 vite 配置文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Icons from "unplugin-icons/vite";
import { FileSystemIconLoader } from "unplugin-icons/loaders";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Icons({
      compiler: "vue3",
      customCollections: {
        custom: FileSystemIconLoader("src/assets/icons"),
      },
    }),
  ],
});

主要的配置是在 customCollections 中新增一个键值对，key 为图标集合名称，value 则为导入的图标。

除了 FileSystemIconLoader 可以导入本地图标以外，unplugin-icons 还提供其他的图标导入方式。

使用

使用import将图标导入后即可使用

<script setup lang="ts">
import vue from "~icons/custom/vue";
import vite from "~icons/custom/vite";
</script>

<template>
  <vue />
  <vite />
</template>

导入的路径是固定的 ~icons/<collection_name>/<icon_name>

自动导入

unplugin-icons 还支持自动导入，通过自动导入可以在不 import 的情况下直接使用图标。

此功能依赖unplugin-vue-components，首先安装它：

npm i unplugin-vue-components -D

更新 vite 配置文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Icons from "unplugin-icons/vite";
import { FileSystemIconLoader } from "unplugin-icons/loaders";
import IconsResolver from "unplugin-icons/resolver";
import Components from "unplugin-vue-components/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Icons({
      compiler: "vue3",
      customCollections: {
        custom: FileSystemIconLoader("src/assets/icons"),
      },
    }),
    Components({
      resolvers: [IconsResolver({ customCollections: ["custom"] })],
    }),
  ],
});

这样使用图标之前就无需自己导入了，当然只有使用的图标最终才会打包，所以不用担心打包后的文件体积

<script setup lang="ts"></script>

<template>
  <i-custom-vue />
  <i-custom-vite />
</template>

也可以同过配置修改图标组件的前缀，图标集合的别名等，更多用法参考文档。