将阿里矢量图添加到element-ui

在阿里矢量图的操作

1. 选择需要的图标添加至购物车

 

选择图标

1. 将购物车中的图标, 添加至项目

    

   

   添加至项目

2. 会自动跳转到我的项目

    

   

   项目页面

3. 在 更多操作 中选择 编辑项目

    

   

   更多操作

4. 将 FontClass/Symbol 前缀 编辑一下, 规范化, 并且不要和 element-ui 中的前缀重名.

   FontFamily 可以随意

    

   

   编辑项目

5. 选择 编辑图标, 将图标的名称规范化

    

   

   编辑单个图标

6. 修改标签名

    

   

   修改标签名

7. 全部完成后, 点击 下载至本地 , 将项目中的图标全部下载下来.

    

   

   下载项目至本地

8. 下载的文件为一个zip的压缩文件, 加压后可以看到如下内容:

    

   

   文件内容

项目中的操作

1. 将文件复制到项目的 assets/icon 目录下

    

   

   复制图标文件

    

   2.修改 iconfont.css 文件

   [class^="el-icon-newfont"], [class*=" el-icon-newfont"] {
     font-family: "FontFamily" !important;
     font-size: 12px;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }

   注意: 第二个 class 中有个空格, font-size 可以调整图标字体的大小

   iconfont.css 文件的所有内容如下:

   @font-face {
       font-family: "FontFamily";
       src: url('iconfont.eot?t=1594950973013'); /* IE9 */
       src: url('iconfont.eot?t=1594950973013#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1594950973013') format('woff'),
       url('iconfont.ttf?t=1594950973013') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('iconfont.svg?t=1594950973013#FontFamily') format('svg'); /* iOS 4.1- */
   }
   
   .FontFamily {
       font-family: "FontFamily" !important;
       font-size: 16px;
       font-style: normal;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
   }
   
   [class^="el-icon-newfont"], [class*=" el-icon-newfont"] {
       font-family: "FontFamily" !important;
       font-size: 18px;
       font-style: normal;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
   }
   
   .el-icon-newfontdashuju:before {
       content: "\e602";
   }
   
   .el-icon-newfonticon_middleware:before {
       content: "\e604";
   }
   
   .el-icon-newfontchushihua:before {
       content: "\e74d";
   }
   
   .el-icon-newfonthost_init:before {
       content: "\e600";
   }
   
   .el-icon-newfontsysguanli:before {
       content: "\e620";
   }
   
   .el-icon-newfontIMguanli:before {
       content: "\e69b";
   }
   
   .el-icon-newfontprometheus:before {
       content: "\e64f";
   }
   
   .el-icon-newfontziyuanguanli:before {
       content: "\e83f";
   }
   
   .el-icon-newfontdocker:before {
       content: "\e64c";
   }
   
   .el-icon-newfontks:before {
       content: "\e62b";
   }
   
   .el-icon-newfontprometheus_logo_grey:before {
       content: "\e603";
   }
   
   .el-icon-newfontmiddleware:before {
       content: "\e610";
   }

    

　　　3. 在 main.js 中引入 iconfont.css 文件

　　　　

import '@/assets/icon/iconfont.css'

 

引入样式文件

1. 使用图标

   用 icon 引用:

   <el-button type="primary"
       title="管理公众号"
       icon="el-icon-newfont-setting" //图标名
       size="mini"
       @click="manage(scope.row.appId)"
       circle/>

   用 class 引用:

   <el-button type="primary"
       title="管理公众号"
       class="el-icon-newfont-setting" //图标名
       size="mini"
       @click="manage(scope.row.appId)"
       circle/>

在线引入css

 

获取在线样式地址

在 vue 项目中的 App.vue 文件中添加这个引用(每次添加新图标到 iconfont 中的购物车、项目之后更新这个链接即可）

用 less 样式引入

</style>
<style lang="less" scoped>
@import url(//at.alicdn.com/t/font_1026187_okd0aeilrwg.css);
</style>

在 el-input 上使用图标

<el-input
    placeholder="设置"
    suffix-icon="el-icon-newfont-setting"
    v-model="input2">
</el-input>
 

参考：https://www.jianshu.com/p/1f1ca6f452b4