svg-icon 使用svg-sprite-loader

1、安装svg-sprite-loader

npm install svg-sprite-loader

2、在vue.config.js配置

chainWebpack: config => {
    config.module
      .rule("svg")
      .exclude.add(path.join(__dirname, "src/assets/icon"))
      .end();
    config.module
      .rule("icon")
      .test(/\.svg$/)
      .include.add(path.join(__dirname), "src/assets/icon")
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      })
      .end();
  }

3、封装svg-icon组件

<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="`#icon-${name}`" />
  </svg>
</template>
<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  }
};
</script>
<style>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

使用

<template>
   <SvgIcon name="account" />
   <SvgIcon name="read" style="font-size: 20px;color: red" />
</template>

<script>
import SvgIcon from "../global/svgIcon";
import "../assets/icon/account.svg";
import "../assets/icon/read.svg";
export default {
  components: {
    SvgIcon
  },
}
</script>

改进

• 每次组件都用局部注册
• 每次使用都需要引入对应的svg

import SvgIcon from "./global/svgIcon.vue";

// 自动化全局引用svg文件
const requireContext = require.context(
  // 目录的相对路径
  "./assets/icon",
  // 是否查询其子目录
  false,
  // 匹配文件的正则表达式
  /\.svg$/
);
requireContext.keys().forEach(requireContext);
// require.context()函数功能为加载多个资源，requreiContext是require.context()的返回结果，是一个函数

createApp(App)
  .use(Antd)
  .use(store)
  .use(router)
  .component("svg-icon", SvgIcon)  // 全局注册
  .mount("#app");