网上的教程大部分是说 通过在线ttf编辑器,打开 uni.ttf , 上传自己的 svg 图标,下载字体文件, 转换 base64, 最后修改项目文件;
如何创建一个私有的字体图标库, 像使用 iconfont 一样方便呢?
下载 uni-icons 的 svg 格式图标
- 通过在线 ttf 编辑器,打开 uni.ttf文件, 下载 svg 图片,(一定要核对图片名称有的不一样)
http://fontstore.baidu.com/static/editor/index.html (好像是打不开了)
https://github.com/ecomfe/fonteditor
- 我自己整理的一份 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
中的文件
- 复制 iconfont.ttf 文件到 uni-icons 文件夹, 重命名为uni.ttf
- 根据 iconfont.json 文件 生成 icons.js
- 根据 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 文件