最近项目中使用到多色图标,可以前的经验都仅仅是在h5页面中直接引用iconfont。此次需要在vue项目下引用多色图标,在csdn下看到一位作者的方法,经过实践并加入自己的理解写下此博客
[参考博客]: https://blog.csdn.net/qq_42268364/article/details/102484074
iconfont 使用
可在网上直接搜索iconfont的使用方式,大概流程是
1.iconfont官网 注册/登录
2.查找需要的图标,添加入库
3.添加到项目
4.进入项目修改相关配置
5.下载图标
项目中使用
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引入
import iconfontSvg from "./assets/css/iconfont/iconfont.vue";
Vue.component("iconfont-svg",iconfontSvg)
页面中使用组件
<iconfont-svg icon="icon-msg" size="38"></iconfont-svg>