如何使用阿里巴巴矢量图标库-iconfont

1.挑选好想用的icon后保存在购物车,进入购物车选择下载代码

2.将加载的压缩包解压,文件夹放在src的某目录下:

例 放在src/assets下,在main.js中包含inconfont.js:import '@/assets/iconfont/iconfont.js'

3.在Vue文件中的调用:

其中#icon-icon-test1为图标名,可在文件家中demo_index.html中查看

<svg class="icon" aria-hidden="true" >
	<use xlink:href="#icon-icon-test1"></use>
</svg>

在style中加入

.icon {
    width: 1.3em;
    height: 1.3em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

你可能感兴趣的:(Vue,iconfont)