随笔（六）『Vue项目 引入 阿里巴巴图标』

1、进入阿里巴巴图标官网：https://www.iconfont.cn/

2、随意选个图标库

3、把需要的图标添加入库（购物车）

4、进入购物车，下载代码

5、在项目中创建文件夹：src/icon，把下载好的文件拷贝过去

6、在main.js文件里，导入：import '@/icon/iconfont.js'

7、测试的组件Test.vue

<template>
  <div>
    <button >我在这里</button>
    <div v-for="(item, index) in iconList" :key="index">
      啦啦
      <svg class="icon" aria-hidden="true">
        <use :xlink:href="`#${item}`"></use>
      </svg>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Test',
  data () {
    return {
      iconList: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      var itemList = document.querySelectorAll('svg symbol');
      for (var i = 0; i < itemList.length; i++) {
        this.iconList.push(itemList[i].id)
      }
    }
  }
}

</script>
<style lang='scss' scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

8、效果