uni-app 图标扩展

在开发过程中我们需要根据项目的实际需求来扩展一套图标库，uni-app 图标扩展步骤如下 :

1. 选取图标并下载

1.1 选择图标并添加到项目

以阿里图标库 ( https://iconfont.cn/ ) 为例 :

通过搜索找到图标 > 加入到购物车 > 添加到具体的项目，如 : test

1.2 配置项目

点击 项目配置 按钮打开配置界面 :

去除 FontClass 前缀，修改 Font Family 为自己的字体名称，如 test。

1.3 下载字体

点击 下载至本地 按钮，下载图标文件。

2. 在 uni-app 中部署并配置字体

2.1 复制字体文件

将下载获得的字体文件 iconfont.ttf 文件 重命名为自己的字体文件，如 test.ttf ，然后复制此文件到 uni-app 项目的 static 目录。

2.2 编写图标配置

在 app.vue 的 style 内或者 自己创建一个 css 文件，编写一下代码 :

/* 自定义图标 */
/* #ifndef APP-NVUE */
@font-face{
	font-family : "my-icons";
	font-weight : normal;
	font-style  : normal; 
	src         : url('@/static/test.ttf') format('truetype');
}
.my-icons{font-family:"my-icons"; font-style:normal;}
/* #endif */

注意

1. 字体名称对应 .my-icons 内的 font-family 属性。

2. 利用条件编译解决多平台兼容问题（ 此处定义非 nvue 平台 ）。

3. 使用图标

通过上面的配置您就可以在项目中直接使用图标， 语法如下 :

<text class="my-icons">图标 unicode</text>

示例 :

<template>
	<view class="gui-margin">
		<text class="my-icons">图标 unicode 在阿里图标库对应项目<可以获取/text>
	</view>
</template>

4. nvue 平台图标扩展

4.1 复制图标文件

将下载获得的字体文件 iconfont.ttf 文件 重命名为自己的字体文件，如 test.ttf ，然后复制此文件到 uni-app 项目的 static 目录。

4.2 加载字体

在 app.vue 内利用条件编译加载字体 :

<script>
export default {
	onLaunch: function() {
		// #ifdef APP-PLUS
		plus.screen.lockOrientation('portrait-primary'); //锁定屏幕
		const dom = weex.requireModule('dom');
		dom.addRule('fontFace', { 
			'fontFamily': "myIcons",
			'src': "url('/static/test.ttf')"
		});
		// #endif
	},
	onShow: function() {},
	onHide: function() {}
}
</script>
<style>
/* #ifdef APP-NVUE */
.my-icons{font-family:myIcons;}
/* #endif */
</style>

4.3 使用图标

语法 : <text class="my-icons">图标 unicode</text>

示例 :

<template>
	<view class="gui-margin">
		<text class="my-icons">图标 unicode 在阿里图标库对应项目<可以获取/text>
	</view>
</template>