1.下载图标
去iconfont下载想要的图标，选择需要的图标加入购物车，然后一起下载生成文件，基本免费，也可以上传自制图标。
图1.iconfont
选择 下载代码
图2.购物车
2.查看文件
下载后你会得到如下的压缩包。并不是所有文件都要用到，选中的3个html文件可直接浏览器打开，里面是3种使用方法，不同的方法使用不同的文件。
图3.压缩包内容
3.选择使用方法，阅读说明
一共有fontclass，symbol，unicode三种使用方法。以symbol为例，说明文档内容如图。(另外两种只能是单色的图标)
图4.说明文档内容
使用步骤写的都很清楚，按要求导入对应的文件就可使用了。
4.效果展示
我用的是symbol形式使用的。
<svg class="icon pointer" aria-hidden="true" @click="share('QQ')">
<use xlink:href="#icon-QQ">
</svg>
图5.试用展示
转载到其他平台需含本文的简书链接，vue技术我只在简书发布
网友评论