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

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

在项目中引入了下载的图标，其中含有彩色精美图标，然后引-用后却不是彩色的。 经过网上查找方法，看到一篇文章：https://blog..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>

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