首先weex为什么要接iconfont呢？
在写这个文章前项目中也是没有接入的，一直都是用图片代替。
然后我就接到了如下需求
进度条.png
一看到这样的进度条，大脑飞速运转（1x1=2, 2x2=4, 3x3=9...）什么如果要用图片代替居然要9张
这种小图标，又是纯颜色的变换，很自然的就想到了平时h5项目中常用的iconfont
首先阅读下weex文档，是提供了DOM.addRule 以加载自定义字体。开发者可以通过指定 font-family加载 iconfont 和 custom font。
<template>
<div>
<text class="iconfont"><text>
</div>
</template>
<script>
let dom = weex.requireModule('dom');
dom.addRule('fontFace', {
fontFamily: 'iconfont',
src: "url('http://at.alicdn.com/t/font_xxx.ttf')", //自己项目的iconfont地址
});
</script>
<style>
.iconfont {
font-family: iconfont;
}
</style>
如上面vue伪代码所示就可以成功使用iconfont，是不是很简单，但是需求并没有这么简单，这个iconfont的图标需要是动态的。
是不是直接把上面的这个变成一个变量就行了呢？
<template>
<div>
<text class="iconfont">{{icon}}<text>
</div>
</template>
<script>
module.exports = {
data: function () {
return {
icon: '',
}
},
}
</script>
我都这么说了明显不是，当这里iconfont是变量的时候，发现根本渲染不出来。
后面定位到如果是变量在webpack打包编译的过程中根本不会对""进行decode，所以展示不出来。
那既然定位到问题，就我们自己给它主动解码
<text class="iconfont">{{getIcon}}<text>
<script>
var he = require('he');
module.exports = {
data: function () {
return {
icon: '',
}
},
computed: {
getIcon: function() {
return he.decode(this.icon)
}
}
}
</script>
在vue里引入he解码模块，但是这样弄太麻烦了，感觉每次这样写都要疯了, 其实还有一个简单的方式就是使用\u解码，只需要把""赋值换成"\ue6c9"赋值就行
<script>
module.exports = {
data: function () {
return {
icon: '\ue6c9',
}
},
}
</script>
终于可以愉快的在weex中使用iconfont了。
