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中的图标还是相当多的,基本能满足大部分小伙伴的需求。也欢迎大家评论区推荐更好用的图标库。

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

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

相关推荐
小磊哥er2 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef065 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_881244407 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆8 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子11 分钟前
Web开发中的文件下载
前端·javascript·面试
peakmain918 分钟前
Gradle 8.11.1的升级之旅
前端
一拳不是超人29 分钟前
PWA渐进式Web应用技术深度解析
前端·pwa
KaneLogger31 分钟前
视频转文字,别再反复拖进度条了
前端·javascript·人工智能
前端风云志44 分钟前
JavaScript中如何遍历对象?
javascript
zwjapple7 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker