Vue3——SVG 图标配置

1. SVG 图标配置

安装 SVG 依赖插件

vite-plugin-svg-icons

npm i vite-plugin-svg-icons -D
npm install fast-glob -D

在vite.config.ts中配置插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}

入口文件导入

// main.ts
import 'virtual:svg-icons-register'

2. svg 封装为全局组件

因为项目很多模块需要使用图标,因此把它封装为全局组件！！！

在 src/components 目录下创建一个 SvgIcon 组件:代表如下

<template>
  <!-- svg:图标外层容器节点,内部需要与use标签结合使用 -->
  <svg :style="{ width, height }">
    <!-- xlink:href执行用哪一个图标,属性值务必#icon-图标名字 -->
    <!-- use标签fill属性可以设置图标的颜色 -->
    <use :xlink:href="prefix + name" :fill="color"></use>
  </svg>
</template>

<script setup lang="ts">
//接受父组件传递过来的参数
defineProps({
  //xlink:href属性值前缀
  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>

在 src/components 文件夹目录下创建一个 index.ts 文件：用于注册 components 文件夹内部全部全局组件！！！

//引入项目中全部的全局组件
import SvgIcon from "@/components/SvgIcon/index.vue";
//引入element-plus提供全部图标组件
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
//全局对象
const allGloablComponent: any = { SvgIcon };
//对外暴露插件对象
export default {
  //务必叫做install方法
  install(app: any) {
    //注册项目全部的全局组件
    Object.keys(allGloablComponent).forEach((key) => {
      //注册为全局组件
      app.component(key, allGloablComponent[key]);
    });
    //将element-plus提供图标注册为全局组件
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      app.component(key, component);
    }
  },
};

在入口文件引入 src/main.ts 文件,通过 app.use 方法安装自定义插件

import gloalComponent from "@/components";
app.use(gloablComponent);

使用 svg-icon

将 svg 存放在 \src\assets\icons

<svg-icon name="welcome" width="600px" height="300px"></svg-icon>