在vue中使用svg

背景

svg作为矢量图，放大不失真，但是如果在vue文件中直接引入svg的话会导致vue文件过长，不友好。想要在组件中使用的时候使用下面的方式来引入svg

// svg-name的值就是svg图片的名称
<svg-icon svg-name="xueren" />

步骤

1. 在components下创建SvgIcon.vue文件,并引入assets/icons/svg目录下的所有svg

<!-- svg组件 -->
<template>
  <svg class="svg-icon" :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
// https://webpack.docschina.org/guides/dependency-management/#requirecontext
const requireAll = (context) => context.keys().map(context);
// webapck提供的API: 获取某个路径下的所有匹配的资源
// 参数1：要搜索的目录，
// 参数2：是否需要搜索子目录
// 参数3：匹配的正则表达式
const req = require.context("../assets/icons/svg", false, /\.svg$/);
requireAll(req);
export default {
  name: "SvgIcon",
  props: {
    // svg 的名称
    svgName: {
      type: String,
      required: true,
    },
  },
  computed: {
    iconName() {
      return `#icon-${this.svgName}`;
    },
    svgClass() {
      if (this.svgName) {
        return "svg-icon" + this.svgName;
      } else {
        return "svg-icon";
      }
    },
  },
};
</script>

<style scoped>
.svg-icon {
  width: 100px;
  height: 100px;
  fill: currentColor;
  overflow: hidden;
}
</style>

2. 将SvgIcon.vue 组件注册为全局组件
   main.js

import SvgIcon from "@/components/SvgIcon.vue";
// 注册到全局
Vue.component("svg-icon", SvgIcon);

3. 使用svg-sprite-loader loader对svg进行处理，配置vue.config.js
   vue.config.js

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

4. 组件中的使用

 <svg-icon svg-name="xueren" />
 <svg-icon svg-name="touxiang" />

最终效果：

总结

svg-sprite-loader 会将加载的svg定义成symbol 汇聚到一个

参考资源

• https://juejin.cn/post/7008497760336871460#heading-1