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中啦。

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

2、SvgIcon组件封装

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

我们的组件有以下特点：

• 能够自定义css样式
• 接收传递的图标名

<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的代码，然后在注册我们的组件。

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文件中进行使用啦！

<template>
    <div class="pc">
        <svg-icon iconName="icon-huidaodingbu"></svg-icon>
    </div>
</template>

效果如下：

三、总结

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

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

我是前端小学生，勇宝，感谢支持与关注。