uniapp引用外部icon图标

方法一 （直接引用）

1. 进入阿里巴巴矢量图标库添加所需使用的icon图标添加至项目中

链接:https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

2.进入我的项目中，复制Unicode中的代码至app.vue中

@font-face {
	  font-family: 'iconfont';  /* project id 2431048 */
	  src: url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.eot');
	  src: url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.woff2') format('woff2'),
	  url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.woff') format('woff'),
	  url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.svg#iconfont') format('svg');
	}
	.iconfont {
	  /* font-family需要和自定义的相同 */
	   font-family: "iconfont" !important;
	   font-size: 24rpx;
	   font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}

3.使用

<text class="iconfont">&#xe625;</text>

方法二 （使用插件）

组件下载地址: https://ext.dcloud.net.cn/plugin?id=1393

1.组件目录(下载好的有两个文件iconfont.css/iconfont.vue，我这里将css里的文件直接放入vue中了)

2. 调整iconfont.vue文件

<template>
	<text class="iconfont" :class="'icon-' + name" :style="{ color: color, fontSize: size + 'px', fontWeight: bold ? 'bold' : 'normal',margin:margin }" @click="onClick"></text>
</template>

<script>
/**
 * iconfont 图标
 * @description 用于展示 iconfont 图标
 * @property {Number} size 图标大小
 * @property {String} type 图标图案，参考示例
 * @property {String} color 图标颜色
 * @event {Function} click 点击 Icon 触发事件
 */
export default {
	name: 'iconfont',
	props: {
		name: {
			type: String,
			default: ''
		},
		size: {
			type: Number,
			default: 16
		},
		color: {
			type: String,
			default: '#fff'
		},
		bold: {
			type: Boolean,
			default: false
		},
		margin: {
			type: String,
			default: "3px"
		},
		index: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {};
	},
	methods: {
		onClick(e) {
			this.$emit('click', e);
		}
	}
};
</script>

<style scoped>
	@font-face {
	  font-family: 'iconfont';  /* project id 2431048 */
	  src: url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.eot');
	  src: url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.woff2') format('woff2'),
	  url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.woff') format('woff'),
	  url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.svg#iconfont') format('svg');
	}
	
	.iconfont {
	  font-family: "iconfont" !important;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	.icon-rili:before {
	  content: "\e625";
	}
</style>

替换style中的内容
1.复制项目中代码

2.下载至本地，将其中的iconfont.css文件打开并复制其中内容

3.使用

<iconfont name="rili" size="12" margin="0 3px"></iconfont>

//注意：在<script></script>中引入加上components: {iconfont,}
<script>
	import iconfont from '@/components/zgwit-iconfont/iconfont.vue'
	export default {
		components: {
			iconfont,
		},
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>