这期内容当中小编将会给大家带来有关如何正确的使用iconfont,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
方式一:使用symbol方式(本质是用svg标签构成的)
第一步:为了代码更好的复用,我们封装一个svg-icon组件,代码如下:
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" rel="external nofollow" ></use>
</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组件
Vue.component('svg-icon', SvgIcon) // 引入全局组件,也可以在局部引入
第三步:使用
在自己需要用到的组件中:
<template>
<div>
<!--方式一:使用svg-->
<svg-icon class="h2" icon-class="iconfontzhizuobiaozhunbduan35"></svg-icon>
<svg-icon class="h2" 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>
.h2{
width:50px;
height:50px;
font-size: 100px;
}
.unicode{
font-size: 30px;
}
.classicon{
/* 可以自定义icon的颜色与大小 */
font-size: 100px;
color:red;
}
</style>
另外两种使用方式是使用unicode和fontclass方式,如上面的代码所示引入与使用
然后我们谈谈这三种方式的优缺点吧
unicode:
优点:
兼容性最好,支持ie6+
支持按字体的方式去动态调整图标大小,颜色等等
缺点:
fontclass:
symbol:
上述就是小编为大家分享的如何正确的使用iconfont了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注天达云行业资讯频道。