vue系列（3）：svg-sprite-loader制作svg-icon组件

文章目录

• 版本说明
• 一、项目目录
• 二、npm安装svg-sprite-loader
• 三、vue.config.js添加配置
• 四、封装SvgIcon.vue组件
• 五、注册全局组件
•     1、svgs文件夹下新建index.js
•     2、main.js中引用index.js

---

版本说明

• vue：2.6.11
• vuecli：4.5.7

---

一、项目目录

---

二、npm安装svg-sprite-loader

npm install svg-sprite-loader

---

三、vue.config.js添加配置

    // 添加 svg loader
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule.test(/\.svg$/)
      // .include.add(resolve("src/assets/imgs"))
      .include.add(path.resolve(__dirname, './src/assets/svgs'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end();

---

四、封装SvgIcon.vue组件

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :href="getIconName" />
  </svg>
</template>

<script>
export default {
  name: "SvgIcon",
  props: {
    iconName: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: "",
    },
  },
  computed: {
    getIconName() {
      return `#icon-${this.iconName}`;
    },
    svgClass() {
      if (this.className) {
        return "svg-icon " + this.className;
      } else {
        return "svg-icon";
      }
    },
  },
};
</script> 

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>

---

五、注册全局组件

    1：svgs文件夹下新建index.js

// 默认导入所有src文件夹下的icons文件(自动导入，不需手动一个个导入)
import Vue from "vue";
import SvgIcon from "@/components/SvgIcon.vue";


Vue.component("svg-icon", SvgIcon);//写了组件在打开 用于注册组件

const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context("./svg", false, /.svg$/);
requireAll(req);

    2：main.js中引用index.js

import "@/assets/svgs/index.js";