在Vite项目里这样使用图标也太爽了

svg 图标

svg 图标我们使用 vite-plugin-svg-icons 插件

1、下载依赖

pnpm install vite-plugin-svg-icons -D

2、 在 vite.config.js 中引入 在 src 下创建一个 icons/svg 文件夹 用于存放 svg 文件
svg 可以去iconfont下载

import { createSvgIconsPlugin } from "vite-plugin-svg-icons"; // 支持svg

export default defineConfig({
  plugins: [
    // svg
    createSvgIconsPlugin({
      // Specify the icon folder to be cached process.cwd() 就是绝对路径的意思
      iconDirs: [resolve(process.cwd(), "src/icons/svg")],
    }),
  ],
});

3、在 main.js 里引入

// svg
import "virtual:svg-icons-register";

4、components 下编写一个 svg-icon.vue 组件

<script setup>
import { computed } from "vue";
const props = defineProps({
  name: {
    type: String,
    default: "",
  },
  prefix: {
    type: String,
    default: "icon",
  },
});

const symbolId = computed(() => `#${props.prefix}-${props.name}`);
</script>

<template>
  <svg aria-hidden="true">
    <use :href="symbolId" />
  </svg>
</template>

5、App.vue 里引入试一试
由于我们可以自动导入 components 下的组件 所以我们可以不用手动引入
name 就是 svg 文件的名称 他会自动去配置的文件夹下找 svg 文件

<template>
  <svg-icon name="test"></svg-icon>
</template>

unplugin-icons

unplugin-icons 是一个图标插件，它可以自动导入图标，并支持多种图标库，包括 Font Awesome、Material Design Icons、Ionicons、Eva Icons、Bootstrap Icons、Simple Icons、Octicons、BoxIcons、Codicon、Carbon 等。

1、下载依赖

npm i -D unplugin-icons

unplugin-icons GitCode 地址

2、vite.config.ts 里引入

import Icons from "unplugin-icons/vite";
export default defineConfig({
  plugins: [
    Icons({
      // 实验性功能 当您导入图标时，它会自动检测合适的包管理器（npm、yarn 或 pnpm）来安装图标集。
      autoInstall: true,
      // 如果不使用这个 就得去自己手动下载图标集
    }),
  ],
});

3、页面中使用
mdi 图标库地址

<script setup>
import IconAccountBox from "~icons/mdi/account-box";
</script>

<template>
  <icon-account-box style="font-size: 2em; color: red" />
</template>

<style lang="scss" scoped></style>