uview2.0 自定义图标方法
首先,到iconfont这个网站添加自己想要的图标,然后下载下来。
- 把ttf文件放到根目录
static/iconfont.ttf
- 把css放到根目录的
common/iconfont.css
打开App.vue 文件,修改成下面:
<script> export default { onLaunch: function() { // #ifndef MP const domModule = weex.requireModule('dom') domModule.addRule('fontFace', { 'fontFamily': "uicon-iconfont", 'src': "url('/static/iconfont.ttf')" }); // #endif }, onShow: function() { }, onHide: function() { } } </script> <style lang="scss"> /*每个页面公共css */ @import "@/uni_modules/uview-ui/index.scss"; @import "common/demo.scss"; /* #ifndef APP-PLUS-NVUE */ @import url("/common/iconfont.css"); /* #endif */ </style>
修改/common/iconfont.css
以下内容:
// 原来 @font-face {font-family: "iconfont"; // 现在 @font-face {font-family: "uicon-iconfont"; // 原来 font-family: "iconfont" !important; // 现在 font-family: "uicon-iconfont" !important;
修改u-icon.vue
:
修改u-icon
同级下的props.js
:
// 是否阻止事件传播 stop: { type: Boolean, default: uni.$u.props.icon.stop }, // 添加下面 // 自定义图标对象 wIconObj: { type: Object, default: ()=>{} }
如何使用?
<u-icon :wIconObj="wIconObj" name="beizidangao" size="30" ></u-icon> <script> import wIconObj from '@/common/icons.js' </script>
icons.js
如何生成?
这里使用node进行生成:
1.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,'icons.js'); fs.writeFile(r, json, 'utf8', (err) => { if (err) { console.log('写入文件出错拉!具体错误:' + err) return message.error("写入路径失败,请重新输入!") } else { console.log('ok'); } });
iconfont.json
就是之前在iconfont网站下载的ttf和css同级下的文件,执行上面文件 就可以生成一个可以使用的icons.js了:
node 1.js
执行后 我生成这样的:
export default{"uicon-WIFI":"\ufda6","uicon-beizidangao":"\ue853"}
然后把icons.js 放到common文件夹下。
使用声明:
1. 本站所有素材(未指定商用),仅限学习交流。
2. 会员在本站下载的VIP素材后,只拥有使用权,著作权归原作者及码云笔记网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。
码云笔记 » uview2.0 自定义图标方法
1. 本站所有素材(未指定商用),仅限学习交流。
2. 会员在本站下载的VIP素材后,只拥有使用权,著作权归原作者及码云笔记网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。
码云笔记 » uview2.0 自定义图标方法