vue中使用svg图标

vue.config.js webpack配置

const { defineConfig } = require("@vue/cli-service");

const path = require("path");

module.exports = defineConfig({
    publicPath: "./",
    transpileDependencies: true,
    chainWebpack: (config) => {
        //svg
        const dir = path.resolve(__dirname, "src/assets/icon");
        config.module.rule("svg").exclude.add(dir).end();
        
        config.module
            .rule("icons")
            .test(/\.svg$/)
            .include.add(dir)
            .end()
            .use("svg-sprite-loader")
            .loader("svg-sprite-loader")
            .options({
                symbolId: "icon-[name]",
            })
            .end();
    },
});

main.js 主入口

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import IconSvg from "@/components/IconSvg.vue";

// 自动引入 assets/icon文件夹下的所有svg图标
const req = require.context("./assets/icon", false, /\.svg$/);
req.keys().map((key) => {
    req(key);
});

const app = createApp(App);
app.component("IconSvg", IconSvg);
app.use(store).use(router).use(Antd).mount("#app");

IconSvg.vue 组件

<template>
    <svg class="iconSvg" :class="svgClass">
        <title>{{ title }}</title>
        <use :xlink:href="iconName"></use>
    </svg>
</template>

<script>
import { defineComponent, computed } from "vue";

export default defineComponent({
    props: {
        id: {
            default: () => "",
            type: String,
        },
        title: {
            default: () => "",
            type: String,
        },
        svgClass: {
            default: () => "",
            type: String,
        },
    },
    setup(props) {
        console.log(props.id, props.title, props.svgClass);

        let iconName = computed(() => {
            return "#icon-" + props.id;
        });

        return {
            iconName: iconName,
            svgClass: props.svgClass
        };
    },
});
</script>

<style scoped>
.iconSvg {
    cursor: pointer;
    width: 100%;
    height: 100%;
}
</style>

Test.vue 测试

<template>
    <div class="svgDiv">
        <IconSvg id="user" title="用户" svgClass="iconSvg"></IconSvg>
    </div>
    <div class="svgDiv">
        <IconSvg id="video" title="视频" svgClass="iconSvg"></IconSvg>
    </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
    setup() {},
});
</script>

<style scoped>
.svgDiv {
    width: 100px;
    height: 100px;
}

.iconSvg {
    fill: #324a52;
}
.iconSvg:hover {
    fill: #0cb5ec;
}
</style>

svg文件

重点：fill="inherit"

video.svg

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
  <g id="视频" transform="translate(-1252.45 -405.157)">
    <rect id="矩形" data-name="矩形" width="20" height="20" transform="translate(1252.45 405.157)" fill="none"/>
    <path id="联合" data-name="联合" d="M-2871.161-463.29V-466a.6.6,0,0,1,.6-.6.6.6,0,0,1,.6.6v.854h2.079l.535-.944-2.423-.9a.6.6,0,0,1-.358-.777.606.606,0,0,1,.778-.358l6.3,2.331a.606.606,0,0,1,.358.778.605.605,0,0,1-.778.357l-2.731-1.01-.8,1.421a.6.6,0,0,1-.527.307h-2.432v.648a.6.6,0,0,1-.6.6A.6.6,0,0,1-2871.161-463.29Zm13.093-3.082a.606.606,0,0,1-.114-.848l2.326-3.051a.605.605,0,0,1,.848-.113.605.605,0,0,1,.233.4.607.607,0,0,1-.119.448l-2.327,3.05a.6.6,0,0,1-.481.238A.6.6,0,0,1-2858.068-466.373Zm-3.3-.172-8.575-3.081a1.673,1.673,0,0,1-1.031-2.1l1.438-4.44a1.669,1.669,0,0,1,.86-.992,1.662,1.662,0,0,1,1.31-.073l10.174,3.664a1.66,1.66,0,0,1,1.047,1.118,1.666,1.666,0,0,1-.3,1.5l-3.036,3.858a1.677,1.677,0,0,1-1.32.642A1.676,1.676,0,0,1-2861.37-466.545Zm-6.32-7.461a.887.887,0,0,0,.886.887.887.887,0,0,0,.887-.887.888.888,0,0,0-.887-.887A.887.887,0,0,0-2867.69-474.006Z" transform="translate(4125.415 885.165)" fill="inherit"/>
  </g>
</svg>