Vue 整合 Svg 图标

1、安装 svg 依赖插件

shell

npm i vite-plugin-svg-icons -D

2、在项目中的 vite.config.ts 文件中添加 svg 配置项

javascript

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons"; // [!code ++] // 引入 svg 插件
import path from "path"; //引入 path

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), "src/assets/icons")], 
      // 指定 symbolId 格式
      symbolId: "icon-[dir]-[name]", 
    }), 
  ],
});

3、在 main.ts 中添加 svg 配置代码

javascript

import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "virtual:svg-icons-register"; // 导入 svg 需要的配置代码

// 引入自定义插件对象：注册整个项目全局组件
import gloalComponent from "./components/index"; 

createApp(App)
  .use(gloalComponent) //安装自定义插件
  .use(ElementPlus)
  .mount("#app");

4、下载 svg 图标并保存在项目中

只要下载 svg 图标，就可以添加使用。互联网上有不少免费的图标库，下载之后还可以微调进行使用。这里我使用阿里图标库

5、图标统一存放在 src/assets/icons 文件夹中管理。

下载之后，将 svg 复制到项目中的 src/assets/icons 文件夹下创建文件，将 svg 代码粘贴，并进行调整。

6、在 components 文件夹中创建 .vue 文件，封装 svg 组件。

SvgIcon.vue

vue

<!-- 
  封装 svg 组件
    参数 1：name（必传）
    参数 2：color（默认为 svg 原本颜色）
    参数 3：width（默认 16px）
    参数 4：height（默认 16px）
 -->
<template>
  <svg :style="{ width, height }">
    <use :href="prefix + name" :fill="color"></use>
  </svg>
</template>

<script setup>
// 接收父组件传递过来的参数
defineProps({
  prefix: {
    type: String,
    default: "#icon-",
  },
  name: String,
  color: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "16px",
  },
  height: {
    type: String,
    default: "16px",
  },
});
</script>

<style scoped></style>

7、将封装好的 svg 组件引入到之前封装的全局组件统一管理的文件中

components/index.js

javascript

import SvgIcon from "~/components/SvgIcon.vue";

const allGlobalCom = { SvgIcon };

export default {
  install(app) {
    Object.keys(allGlobalCom).forEach((key) => {
      app.component(key, allGlobalCom[key]);
    });
  },
};

8、即可在其他组件中直接使用

参考

https://blog.csdn.net/m0_64378190/article/details/136478352

Vue 整合 Svg 图标 ​

参考 ​

Vue 整合 Svg 图标

参考