网络编程 发布日期：2025/10/30 浏览次数：1
在我们项目中经常要使用到iconfont，在此我们使用阿里巴巴矢量库提供的icon图标，此图标库足够为我们提供大量的图标，我们首先需要的事在阿里巴巴矢量图标库新建一个自己的账号，并且新建一个项目，这个项目包含了你所有要用到的图标。我们需要选中需要的图标放到自己的项目中，并下载下来放到自己项目下的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="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：
优点：
缺点：
fontclass：
symbol：
综上所述的一些特点，个人比较推荐使用symbol或者fontclass的方式
总结
以上所述是小编给大家介绍的iconfont的三种使用方式，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！