uni-app使用iconfont自定义图标

@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编码
}

<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
	},
  ...
}