vue项目中使用svgIcon图标

好了，我又来水文章了

首先准备好图标库

阿里巴巴矢量图标库

找到喜欢的图标，加到自己的仓库

点击右上角的购物车，然后添加到项目

进入到仓库，拿到生成的在线链接

引入到项目有两种方式，根据自己项目来选择，经常添加新图标建议用在线，不然用本地更稳定

• 本地引用要注意项目设置勾选svg，不然下载没有svg文件

进入svg配置环节

• 本地引入方式

下载好的压缩包解压到assets文件下面

在main.js中引入

   //本地iconfont的js包
   import './assets/fonts/iconfont.js'
   //本地iconfont的css包
   import "./assets/fonts/iconfont.css"

• 在线引入方式

在public的index.html引入在线链接

创建一个svgIcon.vue文件

<template>
  <svg :style="{ width: iconWidth, height: iconHeight }" aria-hidden="true">
    <use :xlink:href="'#'+ href" />
  </svg>
</template>

<script>
export default {
  props: {
    size: {
      type: [Number, String],
      default: 16,
    },
    href: {
      type: String,
      required: true,
    },
  },
  computed: {
    iconWidth(){
      return `${this.size}px`
    },
    iconHeight(){
      return `${this.size}px`
    }
  }
};
</script>

在main.js中全局注册svgIcon组件

   import svgIcon from "./component/svgIcon.vue";
   Vue.component('svgIcon',svgIcon)

然后就可以全局使用了

<template>
  <div>
    <svgIcon href="icon-zhenzhunaicha" size="50"></svgIcon>
  </div>
</template>

没错，就是这么简单，对，到这就结束了，刚好周末也结束了！！！