uview2.0 如何自定义图标

2021-12-12 13:31:39 阅读：393 来源： 互联网

标签：自定义 uview2.0 iconfont js json uicon common font 图标

首先去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文件夹下

标签：自定义,uview2.0,iconfont,js,json,uicon,common,font,图标
来源： https://blog.csdn.net/weixin_44179923/article/details/121885400

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

uview2.0 如何自定义图标

如何使用?