极限踩坑之vue3配置svg文件的全局使用并修改其样式

vue3配置svg文件修改样式

1. 去下载svg文件并放在项目的/src/assets/icons下
   如图
2. 安装依赖

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

3. 进行配置

• 下载完之后在 vite.config.ts 文件下进行配置如下：

import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import { resolve } from "path";
const pathSrc = resolve(__dirname, "src");
I
cons({
    autoInstall: true,
}),
createSvgIconsPlugin({
    // 指定需要缓存的图标文件夹
    iconDirs: [resolve(pathSrc, "assets/icons")],
    // 指定symbolId格式
    symbolId: "icon-[dir]-[name]",
}),

• 完整的ts文件如下 我整合了自动加载element-plus组件以及图标

import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import vue from "@vitejs/plugin-vue";
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver';
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import { resolve } from "path";
const pathSrc = resolve(__dirname, "src");
// https://vitejs.dev/config/
export default defineConfig({
    server: {
        cors: true,
        open: true,
        host: '0.0.0.0',
        port: 5555,
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8082/api',   //代理接口
                changeOrigin: true,
                ws: false,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    },
    resolve: {
        // 配置路径别名
        alias: {
            "@": pathSrc,
        }
    },
    plugins: [
        vue(),
        AutoImport({
            resolvers: [
                ElementPlusResolver(),
                // 自动导入图标组件
                IconsResolver({
                    prefix: 'Icon',
                }),],
            imports: ['vue', 'vue-router'],
        }),
        Components({
            resolvers: [ElementPlusResolver(),// 自动注册图标组件
            IconsResolver({
                enabledCollections: ['ep'],
            }),],
        }),
        Icons({
            autoInstall: true,
        }),
        createSvgIconsPlugin({
            // 指定需要缓存的图标文件夹
            iconDirs: [resolve(pathSrc, "assets/icons")],
            // 指定symbolId格式
            symbolId: "icon-[dir]-[name]",
        }),
    ],
})

• main.ts配置如下

// 本地SVG图标
import "virtual:svg-icons-register";

• 之前项目出现过element-plus样式丢失问题，解决如下（如果没问题不用添加）

// 解决样式丢失问题
import 'element-plus/theme-chalk/src/message-box.scss';
import 'element-plus/theme-chalk/src/message.scss';

4. 在/src/components下新建/SvgIcon/index.vue
   如图
   
   文件内容如下

<template>
  <svg
    aria-hidden="true"
    class="svg-icon"
    :style="'width:' + size + ';height:' + size"
  >
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
  prefix: {
    type: String,
    default: "icon",
  },
  iconClass: {
    type: String,
    required: false,
    default: "",
  },
  color: {
    type: String,
    default: "",
  },
  size: {
    type: String,
    default: "1em",
  },
});

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

<style scoped>
.svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
  outline: none;
  fill: currentcolor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
}
</style>

5. 项目中引入

// data.meta.icon是我后端获取的值，比如我的图标叫system,那么data.meta.icon也是system
<svg-icon :icon-class="data.meta.icon" />

6. 修改你下载的svg文件

修改fill="#fffff"为 fill=“currentColor”

• 目的是为了控制其颜色
  
  然后通过修改size即可

<svg-icon style="color: #409eff;size: 20px;" :icon-class="data.meta.icon" />

也可以将size改成如下

<svg-icon style="color: #409eff;width: 20px;height: 20px;" :icon-class="data.meta.icon" />