--- theme: smartblue highlight: atom-one-dark --- ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/06879c0182804a21863bc60314033100~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=440&h=280&s=14522&e=jpg&b=0a0724) > 大家好，我是`勇宝`，后台有友友私信我，网站什么时候`上线`，还在建设中，哈哈。`稍安勿躁`。 > > 今天来给大家讲讲`图标`，在我们的网站中开发过程中，一些`导航栏`的部分加上`图标`会使我们的网站更加的`美观`。借着这个机会跟大家唠一唠`Vue3`中怎么有好的使用字体图标。 # 一、iconfont字体图标库 > 首先推荐一款我自己`项目`中使用到的`矢量图标库` [iconfont](https://www.iconfont.cn/)，当前使用`iconfont`的`方式`有很多吗，本章节我只将我在`Vue`项目中`常用`到的一种方式，也是`比较推荐`的一种。 ## 1、挑选图标首先打开[网站](https://www.iconfont.cn/)，搜索我们需要用到的图标，比如我搜索`收藏`，如下： ![1.PNG](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fbdb83367f9744158e0dec6b8ce256b9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1203&h=712&s=44070&e=png&b=fbfbfb) ## 2、加入购物车选择好我们要在`项目`使用到的图标。 ![6.PNG](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c7fd2590613f4005a87c9f3d3174463b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=366&h=252&s=6972&e=png&b=fdfdfd) ## 3、加入项目把我们`选择`好的图标`添加`到我们`创建`的`项目`中，这个鼠标不好使，大家将就一下把 ![7.PNG](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3a93f7392ae9436dacffbe1993c613cc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=522&h=747&s=22959&e=png&b=f8f8f8) ## 4、复制Symbol代码有三种导入方式，这里我使用`Symbol`的方式导入到我们的`vue`项目。点击`点此复制代码`下的代码会`弹出`一个网页，我们需要`复制`其中的代码。 ![10.PNG](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c4fce7df1044b90b67900c7458b632c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1202&h=501&s=46605&e=png&b=fbfafa) ![11.PNG](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e4046b1a52645d98953e91438676f92~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1900&h=320&s=121370&e=png&b=fffefe) 到此为止，我们选择图标的部分就算是结束啦，是不是很简单，下边我们开始导入到我们的Vue项目中。 # 二、iconfont导入Vue > 因为我们是`做项目`，需要`简化`我们的操作，也是为了后期`维护成本`，所以本小结会封装一个公共的`Svg`组件，方便我们去使用图标。也正好借此机会`学习`一下`组件`的简单`封装`。 ## 1、导入Symbol代码 `拷贝`项目下面生成的`symbol代码`，就是刚才我们复制的跟乱码一下的东西，哈哈。我这里是放在了`src/assets/iconfont/index.js`中啦。 ```js //at.alicdn.com/t/font_8d5l8fzk5b87iudi.js ``` ## 2、SvgIcon组件封装我们在`Vue`的`src/components/SvgIcon`目录下创建`index.vue`来封装我们的组件。我们来简单写一写，官网也给出相关[文档](https://www.iconfont.cn/help/detail?spm=a313x.manage_type_myprojects.i3.29.4c733a81e6hZuU&helptype=code)，供大家参考。我们的组件有以下`特点`： - 能够`自定义`css`样式` - 接收传递的`图标名` ```js ``` ## 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 ``` 效果如下： ![1.PNG](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ea983864661645d2bd38d2d6b001aa92~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=774&h=515&s=19150&e=png&b=fefefe) # 三、总结好啦！今天的`讲解`就到此为止了，相信看完你也学会了，赶紧动手去试一试吧。[iconfont](https://www.iconfont.cn/)中的图标还是相当多的，基本能满足大部分小伙伴的需求。也欢迎大家评论区推荐更好用的图标库。写完想起来，以后要不要出一些封装组件的文章，哈哈哈。我是`前端小学生`，`勇宝`，感谢`支持`与`关注`。