uniapp中使用阿里彩色图标

uniapp中默认只能使用纯色图标，使用纯色图标的方法uniapp官网有可自行查看，如果项目中有使用阿里彩色或多色图标的需求就可借助iconfont-tools工具实现

1、把图标加入项目并点击下载到本地

 2、下载好后解压并在文件夹地址栏中输入cmd在终端打开，安装npm install -g iconfont-tools工具（如未安装），然后运行iconfont-tools，如下图   一直按回车就行

 3、然后文件夹会出现一个文件

 打开只需要iconfont-weapp-icon.css一个文件就行，把该文件放在uniapp项目的static中并引入到App.vue的style中

 4、使用，可封装组件，也可不封装

<template>
	<view class="icon t-icon" :class="name" :style="{height:size+'rpx',width:size+'rpx'}">
	</view>
</template>

<script>
	export default {
		props: {
			size: {
				type: Number,
				default: () => {
					return 32
				}
			},
			name: {
				type: String,
				default: () => {
					return ''
				}
			}

		},
		data() {
			return {

			};
		},
		
	}
</script>

<style lang="scss">
.icon{
	display: block;
	background-repeat: no-repeat;//防止显示重复图标
}
</style>

组件使用

//main.js中引入可全局使用无需每次引入
import zhiconColor from "@/components/zh-icon/zh-iconColor.vue" //彩色icon
Vue.component('zh-iconColor', zhiconColor)



//使用
<zh-iconColor :name='css图标名' :size='图标大小'></zh-iconColor>

 不封装的直接使用

<view class="t-icon 图标名称"></view>

要以t-icon开头