Vue中使用iconfont的精美图标——Symbol图标

使用iconfont的Symbol图标（精美图标）

• 在项目中引入了iconfont官网下载的图标，其中含有彩色精美图标，然后引-用后却不是彩色的。
• 经过网上查找方法，看到一篇文章：https://blog.csdn.net/OhRookie/article/details/116495001

一、彩色图标（Symbol方法）的使用，创建组件形式使用

• 项目中使用是在vue中引入 js

// main.js中引入iconfont图标
import "./assets/css/iconfont/iconfont.js";

• 创建svg图标组件iconfont.vue
• 调节图标大小改变font-size属性即可，此组件中改变size数值即可

<template>
	<svg class="iconfont-js" :style="{ 'font-size': size + 'px' }" aria-hidden="true"><use :xlink:href="iconClass"></use></svg>
</template>

<script>
export default {
	name: 'iconfontSvg',
	props: {
		//图标的名称
		icon: {
			type: String,
			required: true
		},
		//图标的font-size，单位是px
		size: {
			type: String,
			default: ''
		}
	},
	computed: {
		iconClass() {
			return `#${this.icon}`;
		}
	}
};
</script>

<style>
.iconfont-js {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}
</style>

• 引入全局组件将iconfont-svg引入

//main.js中引用
import iconfontSvg from "./assets/css/iconfont/iconfont.vue";
Vue.component("iconfont-svg",iconfontSvg)

• 页面中使用组件

<iconfont-svg icon="icon-msg" size="38"></iconfont-svg> 

二、页面中直接使用的方法

• 页面中使用代码如下

<svg class="iconfont-js" :style="{'font-size': xx + 'px'}"  aria-hidden="true"><use xlink:href="#icon-xxx"></use></svg>

• iconfont-js为icon的样式，可以直接放在公共样式中使用

//app.vue中引用
<style type="text/css">
	.iconfont-js {
		width: 1em;
		height: 1em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}
</style>

相比起来第一种比较方便，看个人使用方式了。