网上的教程大部分是说 通过在线ttf编辑器，打开 uni.ttf ， 上传自己的 svg 图标，下载字体文件， 转换 base64， 最后修改项目文件；

如何创建一个私有的字体图标库， 像使用 iconfont 一样方便呢？

下载 uni-icons 的 svg 格式图标

1. 通过在线 ttf 编辑器，打开 uni.ttf文件， 下载 svg 图片，（一定要核对图片名称有的不一样）

http://fontstore.baidu.com/static/editor/index.html （好像是打不开了）

https://github.com/ecomfe/fonteditor

2. 我自己整理的一份 uniapp svg ， 图片名称已经校对过

https://download.csdn.net/download/shijue98/18835200

上传 svg 生成 icon

创建项目时，字体格式：TTF、Base64, 其他依据个人喜好调整

https://www.iconfont.cn

也可以选择其他字体图标库平台

进入项目， 下载生成的图标文件

iconfont 中是 有个 【下载至本地】 的按钮

修改 uni_modules\uni-icons\components\uni-icons 中的文件

1. 复制 iconfont.ttf 文件到 uni-icons 文件夹， 重命名为uni.ttf
2. 根据 iconfont.json 文件 生成 icons.js
3. 根据 iconfont.css 文件中 base64， 替换修改 uni-icons.vue 中 base64 部分代码

如果手动修改， 不仅重复劳动， 而且容易出错， 所以我编写简单的 node.js 实现以上三个步骤

目录结构

uni_modules/uni-icons
|——build
|····|font                  // 存放下载的 iconfont 文件
|··········|iconfont.css
|··········|iconfont.json
|··········|iconfont.ttf
|····|getIconBase64.js     // 读取 iconfont.css 文件中 base64
|····|getIcon.js           // 根据 iconfont.json 文件 生成 icons.js 的内容
|····|template.js          // 用于生成 uni-icons.vue 的模板文件
|····|index.js             // 生成 uni.ttf、uni-icons.vue、icons.js
|——components
|····|uni-icons
|··········|icons.js
|··········|uni-icons.vue
|··········|uni.ttf

读取 iconfont.css 文件中 base64

uni_modules\uni-icons\build\getIconBase64.js

const fs = require("fs");
const path = require('path')

const filePath = path.join(__dirname,'font','iconfont.css')

let data = fs.readFileSync(filePath);

data = data.toString()

data = data.match(/base64,(.+)\s+format\(/)

data = data[1];

if(data === null){
    console.error('base64 生成失败')
    return
}

data = "url('data:font/truetype;charset=utf-8;base64," + data;

module.exports = data

根据 iconfont.json 文件 生成 icons.js 的内容

uni_modules\uni-icons\build\getIcons.js

const fs = require("fs");
const path = require('path')

const u = '\\'+'u'
const filePath = path.join(__dirname,'font','iconfont.json')

let data = fs.readFileSync(filePath);

let iconStr = 'export default {\n'

data = JSON.parse(data)

data.glyphs.map(v=>{
    iconStr += `    "${v.font_class}":"${u + v.unicode}",\n`

});
iconStr += '}'

module.exports = iconStr

生成 uni-icons.vue 的模板文件

uni_modules\uni-icons\build\template.js

const base64 = require("./getIconBase64.js");

let template = `
<template>
	<text :style="{ color: color, 'font-size': size + 'px' }" class="uni-icons" :class="[customIcons,customIcons?type:'']" @click="_onClick">{{icons[type]}}</text>
</template>

<script>
	import icons from './icons.js';
	// #ifdef APP-NVUE
	var domModule = weex.requireModule('dom');
	domModule.addRule('fontFace', {
		'fontFamily': "uniicons",
        'src':"${base64}"
	});
	// #endif

	/**
	 * Icons 图标
	 * @description 用于展示 icons 图标
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=28
	 * @property {Number} size 图标大小
	 * @property {String} type 图标图案，参考示例
	 * @property {String} color 图标颜色
	 * @event {Function} click 点击 Icon 触发事件
	 */
	export default {
		name: 'UniIcons',
		props: {
			type: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: '#333333'
			},
			size: {
				type: [Number, String],
				default: 16
			},
			customIcons:{
				type: String,
				default: ''
			}
		},
		data() {
			return {
				icons: icons
			}
		},
		methods: {
			_onClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifndef APP-NVUE */
	@font-face {
		font-family: uniicons;
		src: url('./uni.ttf') format('truetype');
	}

	/* #endif */

	.uni-icons {
		font-family: uniicons;
		text-decoration: none;
		text-align: center;
	}
</style>

`

module.exports = template

生成 uni.ttf、uni-icons.vue、icons.js

uni_modules\uni-icons\build\index.js

const fs = require("fs");
const path = require('path')
const icons = require('./getIcons')
const template = require('./template')
// const dir = path.join(__dirname,'..','components','uni-icons')

const targetPath = fileName => path.join(__dirname,'..','components','uni-icons',fileName)

//  复制 iconfont.ttf 字体文件
var readStream = fs.createReadStream(path.join(__dirname,'font','iconfont.ttf'));
var writeStream = fs.createWriteStream(targetPath('uni.ttf'));
readStream.pipe(writeStream);
console.log("字体文件 iconfont.ttf  -> uni.ttf")

// 写入 icons.js
fs.writeFile(targetPath('icons.js'), icons,  function(err) {
   if (err) {
       return console.error(err);
   }
   console.log("icons.js 数据写入成功！");
});

// 写入 uni-icons.vue
fs.writeFile(targetPath('uni-icons.vue'), template,  function(err) {
    if (err) {
        return console.error(err);
    }
    console.log("uni-icons.vue 数据写入成功！");
 });

调用生成

先 cd 到 XXXXXXXX\uni_modules\uni-icons\build\ 目录， 执行node index.js

node index.js

即可自动生成 icon 文件