vue中使用svg icon

1、安装svg-sprite-loader

npm install svg-sprite-loader
#OR
yarn add svg-sprite-loader

2、封装svgicon组件

在/src/components/下创建组件SvgIcon

/src/components/SvgIcon/index.vue

<template>
    <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName" />
    </svg>
</template>
  
  <script>
export default {
    name: "SvgIcon",
    props: {
        iconClass: {
            type: String,
            required: true,
        },
        className: {
            type: String,
            default: "",
        },
    },
    computed: {
        iconName() {
            return `#icon-${this.iconClass}`;
        },
        svgClass() {
            if (this.className) {
                return "svg-icon " + this.className;
            } else {
                return "svg-icon";
            }
        },
    },
};
</script>
  
  <style scoped>
.svg-icon {
    width: 1rem;
    height: 1rem;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>

3、注册svg组件

在src文件夹下创建icons文件夹，在该文件夹下创建svg文件夹和index.js

svg文件夹：存放svg图标

index.js：注册svg组件

/src/icons/index.js

import Vue from "vue";
import SvgIcon from "@components/SvgIcon"; // 对应上一步骤中的组件位置，注意@components需要在vue.config.js中配置别名

// 全局注册svg组件
Vue.component("svg-icon", SvgIcon);
// 工程化导入svg图片
const req = require.context("./svg", false, /\.svg$/);
// 定义一个加载目录的函数
const requireAll = (requireContext) =>
    requireContext.keys().map(requireContext);
// 加载目录下的所有svg文件
requireAll(req);

4、配置vue.config.js

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

const path = require("path");
function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = defineConfig({
    configureWebpack: {
        resolve: {
            alias: {
                // 配置路径别名
                "@": resolve("src"),
                "@components": resolve("src/components"),
            },
        },
    },
    chainWebpack(config) {
        // 禁用系统内部对svg的处理
        config.module.rule("svg").exclude.add(resolve("src/icons")).end();
        // 新建规则处理svg文件
        config.module
            .rule("icons")
            .test(/\.svg$/) //添加匹配规则
            .include.add(resolve("src/icons")) //添加我们要处理的文件路径
            .end()//上面的add方法改变了上下文，调用end()退回到include这一级
            .use("svg-sprite-loader")//使用"svg-sprite-loader"依赖
            .loader("svg-sprite-loader")//选中这个依赖
            .options({
                symbolId: "icon-[name]",// 这个配置是这个包的配置不属于webpack，可以查看相关文档，symbolId指定我们使用svg图片的名字
            })
            .end();
    },
});

5、main.js引入svg

import Vue from "vue";
import App from "./App.vue";


Vue.config.productionTip = false;

// 引入svg
import "./icons";

new Vue({
    render: (h) => h(App),
}).$mount("#app");

6、使用

在/src/icons/svg/存放需要的svg图标

在页面中使用

<template>
    <div>
        <!-- icon-class对应“/src/icons/svg/”下的文件名；class-name为自定义的类名 -->
        <svg-icon icon-class="search" class-name="icon" />
    </div>
</template>

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

补充：

1、demo可在iconfont-阿里巴巴矢量图标库中搜索图标，然后下载svg格式使用

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 9C14 11.7614 11.7614 14 9 14C6.23858 14 4 11.7614 4 9C4 6.23858 6.23858 4 9 4C11.7614 4 14 6.23858 14 9ZM13.5815 12.8744C14.4664 11.8291 15 10.4769 15 9C15 5.68629 12.3137 3 9 3C5.68629 3 3 5.68629 3 9C3 12.3137 5.68629 15 9 15C10.4769 15 11.8291 14.4664 12.8744 13.5815L17.6464 18.3536L18.3536 17.6464L13.5815 12.8744Z" fill="currentColor"/>
</svg>

2、自定义icon颜色，设置color即可

<style scoped>
.icon {
    width: 100px;
    height: 100px;
    color: rgb(127, 215, 235);
}
</style>

3、若自定义颜色没有生效，在svg文件中搜索fill，将设置颜色的fill更改为currentColor，

如下示例中有一个fill="black"，将其改为currentColor

原始svg：

<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 4.35427C10.5 5.09225 10.3094 5.81708 9.93404 6.45283C9.24773 7.61515 7.2279 10.318 6.35986 11.4674C6.15844 11.7341 5.759 11.7297 5.56295 11.459C4.71649 10.2903 2.74226 7.54629 2.06043 6.4408C1.6749 5.81572 1.5 5.08771 1.5 4.35427C1.5 1.95324 3.51853 0 6.00043 0C8.48119 0 10.5 1.95324 10.5 4.35427ZM2.0665 4.35427C2.0665 5.03176 2.24033 5.70159 2.60706 6.27299C3.37601 7.47105 5.98184 10.9847 5.98184 10.9847C5.98184 10.9847 8.65401 7.52275 9.42503 6.21487C9.75789 5.65022 9.9335 5.00929 9.9335 4.35427C9.9335 2.25569 8.16859 0.548187 6.00043 0.548187C3.83165 0.548187 2.0665 2.25569 2.0665 4.35427ZM4 4.49999C4 3.39663 4.89716 2.5 6.00028 2.5C7.10282 2.5 8.00001 3.39665 8 4.49999C8 5.60286 7.10281 6.5 6.00028 6.5C4.89716 6.5 4 5.60286 4 4.49999ZM4.54783 4.49999C4.54783 5.30086 5.19887 5.9522 6.00028 5.9522C6.80058 5.9522 7.45216 5.30087 7.45215 4.49999C7.45215 3.69914 6.80058 3.04778 6.00028 3.04778C5.19887 3.04778 4.54783 3.69914 4.54783 4.49999Z" fill="black"/>
</svg>

更改后：

<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 4.35427C10.5 5.09225 10.3094 5.81708 9.93404 6.45283C9.24773 7.61515 7.2279 10.318 6.35986 11.4674C6.15844 11.7341 5.759 11.7297 5.56295 11.459C4.71649 10.2903 2.74226 7.54629 2.06043 6.4408C1.6749 5.81572 1.5 5.08771 1.5 4.35427C1.5 1.95324 3.51853 0 6.00043 0C8.48119 0 10.5 1.95324 10.5 4.35427ZM2.0665 4.35427C2.0665 5.03176 2.24033 5.70159 2.60706 6.27299C3.37601 7.47105 5.98184 10.9847 5.98184 10.9847C5.98184 10.9847 8.65401 7.52275 9.42503 6.21487C9.75789 5.65022 9.9335 5.00929 9.9335 4.35427C9.9335 2.25569 8.16859 0.548187 6.00043 0.548187C3.83165 0.548187 2.0665 2.25569 2.0665 4.35427ZM4 4.49999C4 3.39663 4.89716 2.5 6.00028 2.5C7.10282 2.5 8.00001 3.39665 8 4.49999C8 5.60286 7.10281 6.5 6.00028 6.5C4.89716 6.5 4 5.60286 4 4.49999ZM4.54783 4.49999C4.54783 5.30086 5.19887 5.9522 6.00028 5.9522C6.80058 5.9522 7.45216 5.30087 7.45215 4.49999C7.45215 3.69914 6.80058 3.04778 6.00028 3.04778C5.19887 3.04778 4.54783 3.69914 4.54783 4.49999Z" fill="currentColor"/>
</svg>