设计指南 tmui.design ​

自定义自己的图标 ​

3.0.89开始全端支持自定义图标,并应用到icon图标组件上详见tm-icon组件使用方式

自定图标名称的前缀和字体名称不能与我的tmicon相同

🎉 下载图标和字体 ​

说明：字体图标名称的前缀和字体名称一定要相同,比如：iconfont ,iconfont-name;myicon,myicon-name

• 进入iconfont
• 选好自己的图标，下载图标，勾选好ttf,woff格式，base64
• 下载成功后解压出来，引用自己的图标即可。

🎉 nvue自定图标 ​

上一步下载好的图标里面已经有ttf字体图标了之后。
需要把ttf转换为base64,我不建议直接使用ttf字体。转换网站
送上一篇教程很详细ttf转换base64
同时还要记得weex加载你的字体图标，这样可以确保全平台能够使用。weex加载字体图标点击了解
weex加载方法如下：

var domModule = weex.requireModule('dom');
onBeforeMount(()=>{
    //tmicon是我在iconfont上命名的字体名称。
    //tmiconFont是上面转换ttf后的base64字符集
	// #ifdef APP-PLUS-NVUE
	domModule.addRule('fontFace', {
		fontFamily: 'tmicon', //注意这里必须是驼峰命名，跟上面的css样式对照
		src: "url('data:font/ttf;charset=utf-8;base64,"+tmiconFont+"')"
	});
	// #endif
})

就可以在nvue上使用了，记得在nvue上使用的是unicode符号比如：

<!-- tmicon为字体名称，建议统一加上。 -->
<text class="tmicon">&#xe852;</text>

🎉 使用图标 ​

引入我的tm-icon图标组件即可使用。