# 扩展阿里字体图标库

DNVUE UI 通过大量的实践,收集了用户大部分所需图标,目前收集字体图标数量 360 +,但并没有全面涵盖所有场景和需求,所以您也可以自行引入字体图标。
转base64网址:https://www.zhangxinxu.com/sp/base64.html

# 自行扩展图标用法

DNVUE UI 中的字体图标封装成统一的图标组件,用户自行扩展的字体图标也可使用 <n-icon></n-icon> 组件进行使用,
在当前项目 .dnvue/common 目录下新建 icon.js文件

//icon.js文件内容
module.exports = {
	/*
	 *当前为演示自定义图标用法<n-icon name-custom="dnvue" />
	 *自定义图标使用组件name-custom属性,下方为示例自定义字体图标
	 *格式说明:
	 * 自定义图标名称:显示的图标(使用字体图标时 unicode 字符表示必须 '\u' 开头,如 "\ue123",注意不能写成"\e123")
	 */
	dnvue: "\ue67a"
}
// #ifdef APP-PLUS
const domOrange = weex.requireModule("dom");
domOrange.addRule('fontFace', {
	'fontFamily': 'customIcon',
	'src': `url('=======base64的iconfont.ttf文件值=======')`
});
// #endif
  1. 在App.vue中style下引入(App.vue引入是为了兼容H5 / 各端小程序字体图标)
@font-face {
	font-family: "customIcon";
	src: url('=======base64的iconfont.ttf文件值=======')
}
//base64的iconfont.ttf文件值示例
data:application/octet-stream;base64,AAEAAAALAIAAAwAwR1NV..................................

# 自定义图标使用方式

<n-icon name-custom="自定义图标名称"></n-icon>

# 阿里图标库操作方式

# 1. 进入阿里字体图标库

首先进入阿里字体图标库,进入资源管理 -> 我的项目 -> 创建新项目

1

# 2. 新建项目

没有字体图标库项目空间的需要先创建,如有的可直接跳过此步骤。

2

# 3. 新建立的项目

这是一个新建立的空阿里图库空项目,接下来您可将所需扩展的图标加入项目中。

3

# 4. 去搜索并添加所需的字体图标

搜索您所需扩展的字体图标,添加入库。

4

# 5. 添加到新建的图库项目中

可在阿里图库页面的购物车中查看到您以添加入库的图标,然后到新建的阿里图库项目的项目中。

5

# 6. 下载至本地并解压

下载至本地会获取到download.zip压缩文件,然后进行解压后会获取到font_xxx_xxx的文件

6

# 7. 打开解压后的文件

打开解压后会获取到font_xxx_xxx的文件,将iconfont.ttf文件拿去第三方网站转成base64

7

# 8. 将iconfont.ttf文件转成base64

转base64网址:https://www.zhangxinxu.com/sp/base64.html