uview2.0 自定义图标方法

首先,到iconfont这个网站添加自己想要的图标,然后下载下来。

uview2.0 自定义图标方法

  • 把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.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进行生成:

icons.js如何生成

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文件夹下。

「点点赞赏,手留余香」

3

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

使用声明:
1. 本站所有素材(未指定商用),仅限学习交流。
2. 会员在本站下载的VIP素材后,只拥有使用权,著作权归原作者及码云笔记网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。
码云笔记 » uview2.0 自定义图标方法

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们