app自定义图标 vue_vue使用小技巧之如何使用阿里巴巴矢量图标库

约定不等于承诺〃 2023-01-02 03:25 159阅读 0赞

阿里巴巴矢量图标库介绍：设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

目前拥有icon即将突破500万。

网址：https://www.iconfont.cn

本篇文章将会为小伙伴们详细图解——在vue中如何使用阿里巴巴矢量图标！

--------------------

1、打开阿里巴巴矢量图标库网址

![c99899b6bf72cfe866203920e252cdb1.png][]

--------------------

2、注册并登陆（略）

--------------------

3、点击图标管理—》我的项目，然后创建项目。

![f3d031c84d2995e5dcb4ac74a23e34ca.png][]

--------------------

4、添加新建项目的信息

![1c7244f52f7ec9a2b56018f5fa74688d.png][]

--------------------

5、任意搜索一个图标，例如“elementui”

![8bd3fda1c56620ec87978070e40e5e35.png][]

--------------------

6、在搜索结果中，请将鼠标移入到你心仪的图标，然后点击购物车（不愧是阿里，做什么都有种电商的味道）将你的图标入库！

![44cbc941c0938fda16571915e2dc3f42.png][]

--------------------

7、入库后，网页右上角的购物车图标会有红色警示，点它！

![71c398fd3adffaf6ad263ea7dafb30e3.png][]

--------------------

8、然后点击“添加至项目”。选择好加入的项目后，点击确定。

![e181741df77afc9311e407655f44798f.png][]

--------------------

9、将你的图标下载至本地。

![7c64f10d6eac2c071341e1293cf60560.png][]

--------------------

10、下载并解压缩的文件如下图：

![0f179f02a43055e50dc0084fcb0612be.png][]

--------------------

11、在文件复制到项目中（删除demo开头的文件），我的地址是：src/assets/iconfont

![793124fbbeba3a1faa5bd76f3d9676a9.png][]

--------------------

12、在main.js中引入阿里巴巴矢量图标库

import "@/assets/iconfont/iconfont.css";

--------------------

13、样式在iconfont.css中

.iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
    }
    .iconelementui:before {
      content: "e604";
    }

--------------------

14、使用：

<template>
     <div id="app">
     <i class="iconfont iconelementui"></i>
     </div>
    </template>
    
    <style scoped>
     .iconelementui {
            color: red;
            font-size: 200px;
     }
     #app {
            text-align: center;
     }
    </style>

--------------------

15、预览结果：

![8b82ebbb299dfdab4a27979cc33c1ee0.png][]

[c99899b6bf72cfe866203920e252cdb1.png]: /images/20221120/50953af18b9a4bfbb2d5099996d546a6.png
[f3d031c84d2995e5dcb4ac74a23e34ca.png]: /images/20221120/4f85cacb2dad439994589c8bfb1e24fa.png
[1c7244f52f7ec9a2b56018f5fa74688d.png]: /images/20221120/527d6e959ec0416fa97d57f7c1299aef.png
[8bd3fda1c56620ec87978070e40e5e35.png]: /images/20221120/1bfbe55aa6594f40bf014e9a8887d6cb.png
[44cbc941c0938fda16571915e2dc3f42.png]: /images/20221120/61b8f2b3cd08400c8c21441d1d77574e.png
[71c398fd3adffaf6ad263ea7dafb30e3.png]: /images/20221120/20763eb434ec442ea70e45bc967b0b3a.png
[e181741df77afc9311e407655f44798f.png]: /images/20221120/22c4057d096244b0adaa063ddbbd2c22.png
[7c64f10d6eac2c071341e1293cf60560.png]: /images/20221120/78b74508552542cbae2354bfea8e25d3.png
[0f179f02a43055e50dc0084fcb0612be.png]: /images/20221120/7abc603c93b54b07aa5934e2e65aa377.png
[793124fbbeba3a1faa5bd76f3d9676a9.png]: /images/20221120/7a040e9704ea40faaa867af8ce2301db.png
[8b82ebbb299dfdab4a27979cc33c1ee0.png]: /images/20221120/917ab18013b047c798fb5e20554b1259.png