画像のインポート、svg画像のインポート、SvgIconコンポーネントのカプセル化の方法でsvgを使用します

1つは、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の場所に注意してください：

2.パッケージ化したばかりの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>

ボタンをクリックしてアイコンを変更した後：

3.注意：

1. svgイメージは静的リソースとして使用し、インポートまたは要求するためにパブリックフォルダーに配置する必要があります。そうしないと、svgが見つかりません。
2. と<svg-icon :iconName="icon"></svg-icon>同等のカプセル化されたビジュアルは<img :src="svgicon" alt="" height="24px" />、最終的にはDOMimgタグの形式で表示されます。図1のテキストの最後を参照してください。
3. カプセル化の利点：すべての場所でその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>