二、引入字体图标

uts实测下来⽬前只⽀持加载 ttf 图标，⽽且只能⽤ uni.loadFontFace 来加载

⾸先可以前往阿⾥⽮量图标库

地址：https://www.iconfont.cn/

一、引入

<template>
		<view>
			<text class="iconfont">{{'\ue65b'}}</text>
	</view>
</template>

<script>
	import fontPath from "@/static/iconfont.ttf"
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		mounted(){
			uni.loadFontFace({
				global:false,
				source:fontPath,
				family:"iconfont"
			})
		},
		onLoad() {
			
		},
		methods: {

		}
	}
</script>

<style>
	.iconfont{
		font-family: iconfont;
	}
</style>

二、封装icon组件

1、创建component文件夹

在项目的根目录下创建components文件夹

2、封装u-icon组件

<template>
	<text class="iconfont" :style="{color,'fontSize':size}">{{code}}</text>
</template>

<script>
	import fontPath from "@/static/iconfont.ttf"
	export default {
		name:"u-icon",
		data() {
			return {
				
			};
		},
		props:{
			code:{
				type:String,
				required:true
			},
			color:{
				type:String,
				default:"black"
			},
			size:{
				type:String,
				default:"25px"
			}
		},
		mounted(){
			uni.loadFontFace({
				global:false,
				source:fontPath,
				family:"iconfont"
			})
		}
	}
</script>

<style>
.iconfont{
		font-family: iconfont;
	}
</style>

3、调用

<u-icon :code="'\ue65b'" color="pink" size="35px"></u-icon>