unipp中使用阿里图标，以及闭坑指南

-----------------------------------------------------点赞收藏才是更新的动力-------------------------------------------------

官网下载图标

进入阿里图标网站

1. 将需要下载的图标添加到购物车中

2. 直接下载代码进行解压

在项目中引入

1.在项目根目录新建文件夹如下

2.在app.vue中引入（注意引入路径）

@import  url('./static/font/iconfont.css'); 

使用

1. 通常弄成组件的形式使用，更灵活

2. 新建组件在项目根目录的components下面简历如下组件u-icons/u-icons.vue
   

3. u-icons.vue

<template>
	<view style="display: inline-block;">
		<text :class="[delcss, type]" :style="dynamicStyles"></text>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: ''
			},
			size: {
				type: String,
				default: '30'
			},
			color: {
				type: String,
				default: '#999'
			}
		},
		data() {
			return {
				delcss: 'iconfont', //这里必须是这个值
				dynamicStyles: {
					"font-size": this.size + 'px',
					"color": this.color
				}
			}
		}
	}
</script>

4.在页面中直接使用，比如index.vue中 （同名字的组件是不需要引入注册的，直接使用）type就是

<u-icons  size="50" type="icon-gongzuojingyan" color="red" />

注意事项

建议直接在阿里图标下新建一个项目，以后每次要的图标添加进去项目中
这个文件这里有的下载下来的引入是bsae64的，一大串，

这里需要改成绝对路径，不然在h5上正常，在小程序就显示不出来