uView 2.0使用自定义iconfont图标

由于view2.0暂不支持使用自定义图标，只能通过修改源码去实现

 

第 1 步：先去图标库选择想要的icon加入项目，设置

 

 

 

设置后，保存。

 

第 2 步：再点击下载代码，解压后如下

 

第 3 步：编写createicon.js文件，并通过 node  createicon.js 执行

let path1 = "./iconfont.json";
let fs = require('fs');
const path = require('path');
let plays = JSON.parse(fs.readFileSync(path1));
const obj = {}
plays.glyphs.forEach((item)=>{
    obj['uicon-'+item.font_class] = '\\'+'u'+item.unicode
})
console.log(obj);
let json = "export default" + JSON.stringify(obj)
json = json.replace(/\\\\/g,'\\')
const r = path.resolve(__dirname,'myicons.js');
fs.writeFile(r,  json, 'utf8', (err) => {
    if (err) {
        console.log('写入文件出错拉！具体错误：' + err)
        return message.error("写入路径失败，请重新输入！")
    } else {
        console.log('ok');
    }
});

 

第 4 步： 执行后，生成myicons.js

export default{"uicon-guanyuwomen":"\ue620","uicon-setting":"\ue78e","uicon-chenggong":"\ue65f","uicon-home1":"\ue60f","uicon-kefu":"\ue65a","uicon-changjianwenti":"\ue602","uicon-quanbudingdan":"\ue695"}

 

第5 步：  将 myicons.js 复制到， /uni_modules/uview-ui/components/u-icon 的文件夹

 

 

第 6 步：修改u-icon.vue文件

 ttf 路径 我已下载到本地，个人使用的本地路径。（根据需要，可使用 阿里 cdn 路径）

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第 7 步 ：修改props.js文件，增加自定义标识

myIconObj: { type: Boolean, default: false }

第 8 步 ： 如何使用

<u-icon :customStyle="{paddingTop:20+'rpx'}"
name='guanyuwomen' 
myIconObj="true" 
color="#1188D1" 
size='40' />