iconfont的三种使⽤⽅式详解
在我们项⽬中经常要使⽤到iconfont，在此我们使⽤阿⾥巴巴⽮量库提供的icon图标，此图标库⾜够为我们提供⼤量的图标，我们⾸先需要的事在阿⾥巴巴⽮量图标库新建⼀个⾃⼰的账号，并且新建⼀个项⽬，这个项⽬包含了你所有要⽤到的图标。我们需要选中需要的图标放到⾃⼰的项⽬中，并下载下来放到⾃⼰项⽬下的iconfont⽂件夹之下。（需要更新图标时，下载包也需要重新下载更新）
⽅式⼀：使⽤symbol⽅式（本质是⽤svg标签构成的）
第⼀步：为了代码更好的复⽤，我们封装⼀个svg-icon组件，代码如下：
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" rel="external nofollow" ></use>
svg运行方式有哪些</svg>
</template>
<script>
export default {
name: 'svg-icon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}` // 注意：因为此处绑定的svgClass名已经包含#icon，所以复制symbol名字事不需要名字的前缀了
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第⼆步：在main.js中引⼊
import '@/assets/icons/iconfont.js' //symbol⽅式的相关⽂件
import '@/assets/icons/iconfont.css' // Unicode和fontclass⽅式的样式包
import SvgIcon from '@/components/SvgIcon' // 使⽤icon组件
Vueponent('svg-icon', SvgIcon) // 引⼊全局组件，也可以在局部引⼊
第三步：使⽤
在⾃⼰需要⽤到的组件中：
<template>
<div>
<!--⽅式⼀：使⽤svg-->
<svg-icon class="h1" icon-class="iconfontzhizuobiaozhunbduan35"></svg-icon>
<svg-icon class="h1" icon-class="hekriconshebeidengpao"></svg-icon>
<!--⽅式⼆：使⽤unicode-->
<i class="iconfont unicode"></i>
<i class="iconfont unicode"></i>
<!--⽅式三：使⽤iconfontclass-->
<span class="iconfont icon-baojingliebiao classicon"></span>
</div>
</template>
<script>
/
/ import '@/assets/icons/iconfont.css'
</script>
<style>
.h1{
width:50px;
height:50px;
font-size: 100px;
}
.unicode{
font-size: 30px;
}
.
classicon{
/* 可以⾃定义icon的颜⾊与⼤⼩ */
font-size: 100px;
color:red;
}
</style>
另外两种使⽤⽅式是使⽤unicode和fontclass⽅式，如上⾯的代码所⽰引⼊与使⽤
然后我们谈谈这三种⽅式的优缺点吧
unicode：
优点：
兼容性最好，⽀持ie6+
⽀持按字体的⽅式去动态调整图标⼤⼩，颜⾊等等
缺点：
不⽀持多⾊图标
在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对⽂字的渲染不同，其显⽰的位置和⼤⼩可能会受到font-size、line-height、word-spacing等CSS属性的影响，⽽且这种影响调整起来较为困难
不直观，看unicode码很难分辨什么图标
fontclass：
兼容性良好，⽀持ie8+
相⽐于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
symbol：
⽀持多⾊图标了，不再受单⾊限制。
⽀持像字体那样通过font-size,color来调整样式。
⽀持 ie9+
可利⽤CSS实现动画。
减少HTTP请求。
⽮量，缩放不失真
可以很精细的控制SVG图标的每⼀部分
综上所述的⼀些特点，个⼈⽐较推荐使⽤symbol或者fontclass的⽅式
总结
以上所述是⼩编给⼤家介绍的iconfont的三种使⽤⽅式，希望对⼤家有所帮助，如果⼤家有任何疑问欢迎给我留⾔，⼩编会及时回复⼤家的！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。