解决uni-app无法使用icon-font彩色图标(Symbol方式)

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1、进入https://www.iconfont.cn/官网
2、将项目内或者需要的图标下载至本地

3、将下载的文件进行解压

4、在文件内执行命令行：pm install -g iconfont-tools或cnpm install -g iconfont-tools进行安装，安装成功之后再执行 iconfont-tools
5、出现如图所示的内容，按图示输入文件名即可

6、打开iconfont文件夹即可看到生成的目标文件 iconfont-weapp

7、打开iconfont-weap文件夹，iconfont-weapp-icon.css （默认生成的文件名字）即可引入使用

引入方式1：main.js中引入iconfont图标文件

import '@/iconfont/iconfont-weapp/iconfont-weapp-icon.css'

引入方式2：App.vue文件中引入iconfont文件

@import '@/iconfont/iconfont-weapp/iconfont-weapp-icon.css';

8、使用
普通使用

<view class="t-icon t-icon-图标名"">view>
<style>
// 调整大小 可以使用宽高也可以fontSize
.t-icon {
	width: 10px;
	height:10px;
}
style>

这里仅做参考与笔记，我同时引入了字体图标样式，做了组件分类

<template>
	<view
		v-if="isFont"
		:style="{ color, fontSize: size + 'rpx' }"
		:class="'iconfont ' + iconName"
	>view>
	<view
		v-else
		:style="{ fontSize: size + 'rpx' }"
		:class="'t-icon t-' + iconName"
	>view>
template>

<script setup>
const props = defineProps({
	iconName: String,
	isFont: Boolean,
	color: String,
	size: [String, Number],
})
script>