Vue 2.0、Vuetify 使用iconfont图标或者照片代码优化简化方案

        使用 iconfont 图标的时候需要复制 svg 代码，如果大量重复使用会使代码页显得繁杂不容易维护，编者在此提供了一种简化方案，类似于<img src=""></img>的效果，忘大佬批评指正。

  在src下创建imageVue文件夹，用来存放 iconfont 引用的svg代码，在imageVue文件夹同级目录下创建一个Vue文件，用来作为一个装载图标的地方。

  search.vue是我引入的 iconfont 图标库中的其中一个查询图标，并封装成一个组件，代码：

<script>
export default {
  name: 'M-search'
}
</script>

<template>
  <div id="search">
    <svg t="1697439072181" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2351"><path d="M743.232 210.837333c144.896 144.896 149.781333 376.789333 14.656 527.573334l160.32 160.298666a8.533333 8.533333 0 0 1 0 12.074667l-33.173333 33.173333a8.533333 8.533333 0 0 1-12.074667 0l-161.557333-161.557333c-150.762667 120.746667-371.477333 111.253333-511.232-28.501333-149.973333-149.973333-149.973333-393.109333 0-543.061334 149.973333-149.973333 393.088-149.973333 543.061333 0z m-497.813333 45.248c-124.970667 124.970667-124.970667 327.594667 0 452.565334 124.970667 124.949333 327.594667 124.949333 452.565333 0 124.949333-124.970667 124.949333-327.594667 0-452.565334-124.970667-124.970667-327.594667-124.970667-452.565333 0z" fill="#7dc5eb" p-id="2352"></path></svg>
  </div>
</template>

<style scoped lang="scss">
  .icon {
    width: 26px;
    height: 26px;
  }
</style>

  imageVue.vue是用来装载imageVue文件中的图标组件，将所有组件装载到一起可以方便管理和修改，代码如下：

<script>
import search from "@/assets/imageVue/search.vue";
export default {
  props: ['useImage'],
  data(){
    return {
      useImageFlag: [
        {id:"000", name: "search", flag: false}
      ]
    }
  },
  components: {
    search,
  },
  methods:{
    changeFlag(){
      let i = 0;
      for (i; i < this.useImageFlag.length; i++){
        if (this.useImage === this.useImageFlag[i].name){
          this.useImageFlag[i].flag = true;
        }
      }

    }
  },
  mounted() {
    this.changeFlag()
  }
}
</script>

<template>
  <div id="imageVue">
    <search v-if="this.useImageFlag[0].flag"></search>
  </div>
</template>

<style scoped lang="scss">

</style>

  id建议按照顺序来，便于查看，name建议是用封装图标组件的名字，flag是用于判断是否使用该组件

 {id:"000", name: "search", flag: false}

        methods的作用是来判断需要使用哪一个组件，如果父组件传递过来的值匹配，就改变flag的布尔值，利用v-if判断，如果为真，让预装载的组件重建，父组件就是在代码中使用图标的位置，利用时就如同使用普通的组件一样：

<image-vue use-image="search"></image-vue>

注意：use-image的作用是作为传值的属性名要求和子组件中props的值对应。

建议在imageVue文件中封装的图标组件名字简洁易懂，后面调用该组件时候都是用改名字，便于管理。