vue项目引入外部图标

拼搏现实的明天。 2024-04-07 13:08 76阅读 0赞

## 前言 ##

在查找怎么引入外部图标的时候，发现对于一些细节他们的文章描述的并不清楚。本次以VantUi项目为例教大家如何引入外部图标。只要是vue项目，不同的框架引入外部图标是一样的

## vantui原生内部引用 ##

在正式引入之前，我觉得还是有必要说一下它原本的用法  
它内置有一定数量的图标，但是当我们有需要用到其他没有的图标的时候，就需要引入了  
![在这里插入图片描述][e13747315ddb42aa9d3fab429e791cf3.png]

> 这里发现它的图标是不够的，数量相对较少，以及不一定满足我们的需求

`基础用法`  
通过 name 属性来指定需要使用的图标，Vant 内置了一套图标库，可以直接传入对应的名称来使用。

<van-icon name="chat-o" />

![在这里插入图片描述][dc97e36445944e5b9f5b0e19fed89e28.png]  
`使用图片 URL`  
你也可以直接在 name 属性中传入一个图片 URL 来作为图标。

![在这里插入图片描述][f842e4da423c46dea266de875dc5a7f6.png]  
`以上就是它原生的使用方法，都是操作name属性进行获取图标`

## 引入iconfont ##

本次使用的是阿里巴巴的iconfont，它的链接网址为:  
[阿里巴巴iconfont图标库][iconfont]  
ps：`需要登录才能下载图标`

### 引入外部图标步骤 ###

#### 选择图标 ####

进入阿里巴巴图标库之后，界面为这样  
![在这里插入图片描述][3e9649e3b0e54998815743b3768e213a.png]  
然后选择你需要的图标,如我图片，在需要的图标上面停留添加入库  
![在这里插入图片描述][31cf9f33bb384439b6233ad369649d5c.png]  
添加图库之后，在你登录的状态下，右上角是会有一个购物车图标  
![在这里插入图片描述][b1e940b1a9bd4ad0b4876cfe4372ea5b.png]  
点击它,然后就会弹出你选择好的图标  
![在这里插入图片描述][778147d1810c420d8ca04a4e384bd343.png]  
接着点击下载代码，我们就有了我们的图标压缩包  
![在这里插入图片描述][5e61b3ee63294c8e8e355806fe36904d.png]

#### 引入项目 ####

首先我们需要进行一个解压  
![在这里插入图片描述][76052db6c75e427fb80c4543ee1c5fec.png]  
解压出来，文件名是一堆不容易理解和看懂的文件名称，为了方便引入和查找,我们先对它重新命名，命名按照自己的喜好即可  
如我取名叫lockIcon  
![在这里插入图片描述][0bb643f9c37e4f659a35486bd0e7267b.png]  
然后，将该解压后的文件夹，放到我们项目的src/assets文件夹底下

![在这里插入图片描述][41550db2b5b34070aa585433b9860a4c.png]  
最终结构是这样  
然后我们需要在main.js引入这个`iconfont.css`  
即解压后文件夹的其中一个文件  
在main.js如我图片显示路径应该是  
`src/assets/lockIcon/iconfont.css`  
于是，最终写入到mai.js的代码为:

// 引入iconfont图标
    import "../src/assets/lockIcon/iconfont.css"

![在这里插入图片描述][fb86bc71b2124e55a2a530626333bbe5.png]

#### 使用外部引入图标 ####

在最终使用的时候，如果是第一次使用的人，一定会感到费解，到底该如何使用?名称应该是怎么样的?  
我们进入到`iconfont.css`文件看代码

@font-face {
        
      font-family: "iconfont"; /* Project id  */
      src: url('iconfont.ttf?t=1662339871569') format('truetype');
    }
    
    .iconfont {
        
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-suoding:before {
        
      content: "\f00c9";
    }
    
    .icon-jiesuo:before {
        
      content: "\f0195";
    }

在这里我们注意`font-family`这个属性，默认它的值是iconfont  
也就是，父级对象是它。那么图标呢?

.icon-suoding:before {
        
      content: "\f00c9";
    }
    
    .icon-jiesuo:before {
        
      content: "\f0195";
    }

注意到这个,我实际上项目中只引入了两个图标，锁和解锁的图标  
![在这里插入图片描述][55cc2d1f296c4f6c965f107abc17d3b5.png]  
那么，这里我们就清楚了,对应这两个图标的时候,我们应该使用如代码中的名称：  
锁定:`.icon-suoding`  
解锁:`.icon-jiesuo`  
这个是其他人并没有讲到的地方  
于是在页面中，我们使用代码引入图标

<van-icon class="iconfont icon-suoding" class-prefix="icon" name="icon-suoding"></van-icon>
    
    <van-icon class="iconfont icon-jiesuo" class-prefix="icon" name="icon-jiesuo"></van-icon>

需要一提的是，我在尝试的时候，只写一下代码也是可以的

<van-icon class="iconfont icon-suoding"></van-icon>
    
    <van-icon class="iconfont icon-jiesuo"></van-icon>

因此，作为外部引入很大一部分是通过css进行引入

#### 项目实际效果 ####

那么，在这里也给大家看一下我项目中实际的结果吧  
![在这里插入图片描述][1201b9b4b4144460aaa9fe63f45aba08.png]  
![在这里插入图片描述][4e2de99e552f4b4d9998a453660a25f4.png]

## 结语 ##

以上就是关于vue如何引入外部图标的方法，也同样是适合其他vue框架的

[e13747315ddb42aa9d3fab429e791cf3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0cac07fb10204b89ac424d2fe9db280a.png
[dc97e36445944e5b9f5b0e19fed89e28.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2c26d09a6b414a8e82740b1844392d56.png
[f842e4da423c46dea266de875dc5a7f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0c1d6eef779442aa93d6fb42ca75df4d.png
[iconfont]: https://www.iconfont.cn/
[3e9649e3b0e54998815743b3768e213a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f21272b0717943c0814329779f2f0039.png
[31cf9f33bb384439b6233ad369649d5c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/80facaa7b9d94497b0d0582db357dc51.png
[b1e940b1a9bd4ad0b4876cfe4372ea5b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2967e12adbbc4b8483e3128e9d5c6c04.png
[778147d1810c420d8ca04a4e384bd343.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3dc07dc97e6a420485897907752c7a6e.png
[5e61b3ee63294c8e8e355806fe36904d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/e467e043efd34791ae6f85f2e2469227.png
[76052db6c75e427fb80c4543ee1c5fec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d2cf0c30531d43adacfe32d71985f4ac.png
[0bb643f9c37e4f659a35486bd0e7267b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8e721695441f4659877e51b0012a220c.png
[41550db2b5b34070aa585433b9860a4c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/347c75fd47ef417db18f6424512f1439.png
[fb86bc71b2124e55a2a530626333bbe5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/4ca5fe939fec48a687d62f33465447eb.png
[55cc2d1f296c4f6c965f107abc17d3b5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/9650fb435a8c4da993f3ae5b834780b4.png
[1201b9b4b4144460aaa9fe63f45aba08.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0c4b632f6a104985b27efa27a7ca65e2.png
[4e2de99e552f4b4d9998a453660a25f4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/dd026a8fb8eb4c788fc920a250c41b6d.png