Vue3巧用iconfont字体图标库(建议收藏)

大家好,我是勇宝,后台有友友私信我,网站什么时候上线,还在建设中,哈哈。稍安勿躁

今天来给大家讲讲图标,在我们的网站中开发过程中,一些导航栏的部分加上图标会使我们的网站更加的美观。借着这个机会跟大家唠一唠Vue3中怎么有好的使用字体图标。

一、iconfont字体图标库

首先推荐一款我自己项目中使用到的矢量图标库 iconfont,当前使用iconfont方式有很多吗,本章节我只将我在Vue项目中常用到的一种方式,也是比较推荐的一种。

1、挑选图标

首先打开网站,搜索我们需要用到的图标,比如我搜索收藏,如下:

2、加入购物车

选择好我们要在项目使用到的图标。

3、加入项目

把我们选择好的图标添加到我们创建项目中,这个鼠标不好使,大家将就一下把

4、复制Symbol代码

有三种导入方式,这里我使用Symbol的方式导入到我们的vue项目。点击点此复制代码下的代码会弹出一个网页,我们需要复制其中的代码。

到此为止,我们选择图标的部分就算是结束啦,是不是很简单,下边我们开始导入到我们的Vue项目中。

二、iconfont导入Vue

因为我们是做项目,需要简化我们的操作,也是为了后期维护成本,所以本小结会封装一个公共的Svg组件,方便我们去使用图标。也正好借此机会学习一下组件的简单封装

1、导入Symbol代码

拷贝项目下面生成的symbol代码,就是刚才我们复制的跟乱码一下的东西,哈哈。 我这里是放在了src/assets/iconfont/index.js中啦。

js 复制代码
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

2、SvgIcon组件封装

我们在Vuesrc/components/SvgIcon目录下创建index.vue来封装我们的组件。我们来简单写一写,官网也给出相关文档,供大家参考。

我们的组件有以下特点

  • 能够自定义css样式
  • 接收传递的图标名
js 复制代码
<template>
    <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconClassName"></use>
    </svg>
</template>

<script setup>
import { computed, defineProps } from 'vue'

const props = defineProps({
    // 添加自定义类名
    className: {
        type: String,
        default: ''
    },
    // iconfont中的名字
    iconName: {
        type: String,
        required: true
    }
})

const svgClass = computed(() => {
    if (props.className) {
        return `svg-icon ${ props.className }`
    } else {
        return 'svg-icon'
    }
})
const iconClassName = computed(() => `#${ props.iconName }`)
</script>

<style lang="scss" scoped>
.svg-icon {
    width: 2em;
    height: 2em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>

3. 注册SvgIcon组件

首先我们需要在main.js中导入上面复制symbol代码,然后在注册我们的组件

js 复制代码
import App from './App.vue'
// 1. 导入[js/ts]文件
import '@/assets/iconfont'

const app = createApp(App)

// 2. 注册SvgIcon
app.component('svg-icon', SvgIcon)
......

注:这里是演示,正常情况不应该这样注册组件,我们应该写一个单独的plugins/index.js(我喜欢起这个名字)文件。

4. 组件的使用

接下来就可以在我们自己vue文件中进行使用啦!

js 复制代码
<template>
    <div class="pc">
        <svg-icon iconName="icon-huidaodingbu"></svg-icon>
    </div>
</template>

效果如下:

三、总结

好啦!今天的讲解就到此为止了,相信看完你也学会了,赶紧动手去试一试吧。iconfont中的图标还是相当多的,基本能满足大部分小伙伴的需求。也欢迎大家评论区推荐更好用的图标库。

写完想起来,以后要不要出一些封装组件的文章,哈哈哈。

我是前端小学生勇宝,感谢支持关注

相关推荐
袁煦丞37 分钟前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆38 分钟前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句1 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜1 小时前
CommonJS与ESM
前端·javascript
LaoZhangAI1 小时前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端
G等你下课1 小时前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试