uni-app使用iconfont自定义图标

记录下如何在uni-app中使用自定义图标

# 图标库准备

1.注册阿里巴巴图标矢量库账号 2.选择顶部菜单图标管理-我的项目后新建项目 3.在新建的项目中添加自己喜欢的图标 4.点击查看在线链接，获取在线图标链接代码

如果没有链接则根据提示生成在线链接代码

获取生成后的链接代码

# uni-app组件修改

基于官方的m-icon组件进行修改 m-icon.css中font-face的src修改为自己图标库在线链接里truetype格式的链接

代码语言：javascript复制

@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文件不用作额外修改

代码语言：javascript复制

<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>

# 页面引用组件

在页面中引入修改后的图标组件

代码语言：javascript复制

<m-icon type="图标名称" color="#757575" size="10"></m-icon>

代码语言：javascript复制

import mIcon from '@/components/m-icon/m-icon.vue';
export default {
	components: {
		mIcon
	},
  ...
}

css app icon src 阿里巴巴

0 人点赞