记录下如何在uni-app中使用自定义图标
图标库准备
1.注册阿里巴巴图标矢量库账号
2.选择顶部菜单图标管理-我的项目后新建项目
3.在新建的项目中添加自己喜欢的图标
4.点击查看在线链接，获取在线图标链接代码
如果没有链接则根据提示生成在线链接代码
获取生成后的链接代码
uni-app组件修改
基于官方的m-icon组件进行修改
m-icon.css中font-face的src修改为自己图标库在线链接里truetype格式的链接
@font-face {
font-family: uniicons;
font-weight: normal;
font-style: normal;
src: url('自定义图标库的在线链接.ttf') format('truetype');
}
.m-icon {
font-family: uniicons;
font-size: 48upx;
font-weight: normal;
font-style: normal;
line-height: 1;
display: inline-block;
text-decoration: none;
-webkit-font-smoothing: antialiased;
}
.m-icon.uni-active {
color: #007aff;
}
.m-icon-图标名称:before {
content: "\e6af";//在网页上查看自己图标对应的unicode编码
}
m-icon.vue文件不用作额外修改
<template>
<view class="m-icon" :class="['m-icon-'+type]" :style="{color:color,'font-size':fontSize}" @click="onClick()"></view>
</template>
<script>
export default {
props: {
/**
* 图标类型
*/
type: String,
/**
* 图标颜色
*/
color: String,
/**
* 图标大小
*/
size: {
type: [Number, String],
default: 24
}
},
computed: {
fontSize() {
var size = Number(this.size)
size = isNaN(size) ? 24 : size
return `${size}px`
}
},
methods: {
onClick() {
this.$emit('click')
}
}
}
</script>
<style>
@import "./m-icon.css";
</style>
页面引用组件
在页面中引入修改后的图标组件
<m-icon type="图标名称" color="#757575" size="10"></m-icon>
import mIcon from '@/components/m-icon/m-icon.vue';
export default {
components: {
mIcon
},
...
}
