iconfont的彩色图标的使用

适用于移动端/H5的方法：连接

首先找到你想使用的矢量图标：iconfont
找到图标添加入库：

然后添加至项目：

点击symbol然后下载到本地：

然后把选中的这几个文件放到static/font（文件夹名字随意）文件夹中。

点击那个html文件：

需要引入js文件和css文件。
我是单独在static中创建了两个文件：

其中把iconfont.js文件放到js文件夹中（我改名为了main_icon），然后把上一张图第二步蓝色框的内容添加到main_icon.scss中。

然后再main.js中引入js文件：

在App.vue中引入scss文件：

然后就可以使用图标啦：
我用的for循环遍历，所以前面加了一个冒号

			<view class="nav_item" v-for="(item, index) in navs" :key="index" @click="navItemClick(item.path)">
				<svg :class="item.icon" aria-hidden="true">
				  <use :xlink:href="item.tag"></use>
				</svg>
				<text>{{item.title}}</text>
			</view>

		data() {
			return {
				navs:[
					{
						icon:'iconfont',
						tag:'#icon-fengzheng',
						title:'颜值打分',
						path:'/pages/grade/grade'
					},
					{
						icon:'iconfont icon-beautify',
						tag:'#icon-dangao',
						title:'图片美化',
						path:'/pages/beautify/beautify'
					}
				]
			}
		},

大功告成！

参考