一、封装SvgIcon组件

SvgIcon.vue文件

<template>
  <div>
    <img v-if="svg" :src="svg" :class="$style.noSelect" height="24px" />
  </div>
</template>

<style module>
/* CSS Modules： */
.noSelect {
    
    
  user-select: none; /*文本不能被选择，设置后，图标不能被选中*/
}
</style>
<script>
export default {
    
    
  name: "SvgIcon",
  props: {
    
    
    iconName: String
  },
  data() {
    
    
    return {
    
    
      svg: null
    };
  },
  watch: {
    
    
    // 监听 icon，icon改变的时候，便调用importIcon，导入当前传入的svg图
    iconName(icon) {
    
    
      if (this.iconName) {
    
    
        this.importIcon(icon);
      }
    }
  },
  mounted() {
    
    
    if (this.iconName) {
    
    
      this.importIcon(this.iconName);
    }
  },
  methods: {
    
    
    importIcon(icon) {
    
    
      return import(/* webpackMode: "eager" */
      `../../public/icon/${
      
      icon}.svg`)
        .then(obj => {
    
    
          console.log(obj);
          this.svg = obj.default;
        })
        .catch(e => {
    
    
          this.svg = null;
          throw e;
        });
    }
  }
};
</script>

注意svg的位置：

二、引入并使用刚刚封装的SvgIcon

<template>
  <div class="test-svgicon">
    <svg-icon :iconName="icon" ></svg-icon>
    <br />
    <el-button @click="changeIcon">点击改变icon</el-button>
  </div>
</template>
<script>
import SvgIcon from "@/components/SvgIcon.vue";
export default {
    
    
  components: {
    
    
    SvgIcon
  },
  data() {
    
    
    return {
    
    
      icon: "users"
    };
  },
  methods: {
    
    
    changeIcon() {
    
    
      this.icon = "life";
    }
  }
};
</script>

点击按钮，改变图标之后：

三、注意：

1. 该svg图必须作为静态资源，放在public文件夹下才可import 或者require,否则将找不到该svg.
2. 刚刚封装的 <svg-icon :iconName="icon"></svg-icon> 的视觉等价于 <img :src="svgicon" alt="" height="24px" /> ，最终，dom都是以一个img标签的形式呈现,见文末的图。
3. 封装的优势： 不用在每个地方都去 单独require一下那个svg，可减少代码量、提升性能。

 <img :src="svgicon" alt="" height="24px" />
 <template>
  <div class="test-svgicon">
    <svg-icon :iconName="icon"></svg-icon>
    <br />
    <br />
    <img :src="svgicon" alt="" height="24px" />
    <br />
    <el-button @click="changeIcon">点击改变icon</el-button>
  </div>
</template>
<script>
import SvgIcon from "@/components/SvgIcon.vue";
export default {
    
    
  components: {
    
    
    SvgIcon
  },
  data() {
    
    
    return {
    
    
      svgicon: require("../../../public/icon/users.svg"),
      icon: "users" // 这里的icon的值是图标的名字，图标名最好是英文
    };
  },
  methods: {
    
    
    changeIcon() {
    
    
      this.icon = "life";
    }
 }
};
</script>