uniapp中，uni-icons 图标通过fontFamily属性自定义图标

uniapp中，uni-icons 图标通过fontFamily属性自定义图标

为什么要使用fontFamily自定义图标？

第一个是由于uni-icons提供的图标有限，不能满足日常开发需求。

第二个原因是，根据官网描述，通过 customPrefix 自定义图标这个功能即将废弃。同时提供了用fontFamily属性自定义图标

fontFamily属性

阿里图标

阿里图标官网，随便搜索一个图标，加入购物车

点击购物车，添加项目，没有项目就新建一个

点击生成代码

可以看到，已经生成了远程引用代码和unicode编码

远程引用

复制代码到本地要使用图标的vue文件中，

<template>
	<view>
		<uni-icons fontFamily="jiaobiao" type="star" :size="50">{{'&#xe637;'}}</uni-icons>
	</view>
</template>
<script setup>

</script>
<style lang="scss" scoped>
	@font-face {
	  font-family: 'jiaobiao';  
	  src: url('https://at.alicdn.com/t/c/font_4663282_i1tgjt3lsg.ttf?t=1724645752853') format('truetype');
	}
</style>

注意：

• 阿里图标默认是没加协议头的，要在url()内部加上https:
• 下载的字体文件，字体名都叫 iconfont，在 nvue 内使用时需要注意，此字体名重复可能会显示不正常，可以使用工具修改。
• 组件声明 fontFamily 属性，值为 font-family ,此时组件的 type 属性将不生效
• 组件内需要使用字体的 unicode 码作为图标显示内容

最终结果

本地引用

下载文件

点击项目配置，选中ttf，其他的自定义即可。

下载到本地，解压后，提取iconfont.ttf到你的目录中，一般放在static目录下面

引入及结果

注意路径问题

<template>
	<view>
		<view>
			<uni-icons fontFamily="iconfont" :size="50">{{'&#xe637;'}}</uni-icons>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'iconfont';
		src: url('@/static/ttf/iconfont.ttf' ) format('truetype');
	}
</style>

批量引用

有了上面的基础后，就可以批量使用阿里图标了。主要就是在案例购物车中添加目的图标，本地vue文件修改unicode编码。

<template>
	<view>
		<view>
			<uni-icons fontFamily="iconfont" :size="50" color="#d81e06">{{'&#xe640;'}}</uni-icons>
		</view>
		<view>
			<uni-icons fontFamily="iconfont" :size="50" color="#1afa29">{{'&#xe6d4;'}}</uni-icons>
		</view>
		<view>
			<uni-icons fontFamily="iconfont" :size="50" color="#1afa29">{{'&#xe66b;'}}</uni-icons>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
	// @font-face {
	// 	font-family: 'iconfont';
	// 	src: url('@/static/ttf/iconfont.ttf' ) format('truetype');
	// }

	@font-face {
		font-family: 'iconfont';
		src: url('https://at.alicdn.com/t/c/font_4663244_ad76jemzmr.ttf?t=1724654696072') format('truetype');
	}
</style>

注意，默认引用图标颜色未黑色，可通过color属性自定义颜色。

结果展示