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

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

参考: 阿里矢量图官方帮助

在阿里矢量图的操作

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

选择图标

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

   添加至项目

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

   项目页面

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

   更多操作

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

   FontFamily 可以随意

   编辑项目

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

   编辑单个图标

7. 修改标签名

   修改标签名

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

   下载项目至本地

9. 下载的文件为一个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=1548124350966'); /* IE9 */
  src: url('iconfont.eot?t=1548124350966#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARoAAsAAAAACJQAAAQZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEYIQMATYCJAMMCwgABCAFhQUHOhtuB1FUTapkPwrcPUXYFmGihNiEIf/wJvxbHjjj4b/9WPfNDOoNmog0yyTRiDcOGV/xGrZtKBuSl/Dvf26ohHqvb1gkiUif3P8zOTR0WiZlD42BvDTp7VWDQWHyNcrnuSZfEX47AKhepnVg0kAnOLCkCt8bnQ2HBYgbxm6iPIjLBBr1E0Q3B7NdJKMA6wJxo3Mpkkn5lZrOUC/Ulmws4psa9el92sRX/vv4bzbqSWoycNXOWV+NtH7VPH/IsdWD4/zodbwotG1kjIsoxGlpfF88LI6La3TMRH1jrSKksTJVBeCia9eu9I+XiFrAbBaZ4VLiVw1mCX598EsilVfXogHfiRDc3X176gbSsfOwEYA4wOmQWEFKeCpWtnA0fZwcYV3FPj5G4kRgFNnAOTqyZy0kLYwlgyGkGLuQlPIQODqCM3TgtrWMDZ6FOGVkAGzZk25HOngsTT4eHXwigJaMkIFFVaRQaS1V35EGTssMDVpCwe7TRgaUkUKdhy7F7eUVFOjOiXD5+PIiK1TITl5MDhbXUKATJ0fyAYeHklChbXM7NRhHgZYMtcWSJqPY5mUDHFdMKlpYSgbBTdxIcSMpb2EZjLawR08JAEVNG4A0W9fvXyQWxP/zKnH/f/8+N5bOxJqYwGTJiJ2dLi+fnQVIZ2EmJm73XIWIIUL4+Dgubm/fGfuDlS2DpgGm/vS0HqNy9PQU3KrSGvwp4ZMSsFIpeV0DgCfYcMIUxxkIktIgN8MzC3EbqaZ8AV7is13HX0MjcBylpsHh+Vf30ewvYJ41AAWj3UadNUTtludBqeLmQV8hKr+vL++zwrIHfU6xCD/fgWy7t0GfUFN8c1JNUUF9fDNSMxGtkEHfV30vQhcQINo4O58UDGGZYA5dEnE1pmiR9OD+n2uc65M9dmiXS8EEhZXapvWnm+Adt3MlF7VR7+HhM+LiAbYiRFDdF7+SA9GIEi4dN10uHJFNef1rPU4BP2/qprnaLkn9y0kEPztaVCD8LlxFDORiG2pFv5I9qnuVvMjrKRWQ7vTrb/WMLtJko54YSZ0BZI0GicJMo0aTVb1WsrdENBqz3N6ky01clAaMugsI3R5IWv1A1u1JFOaPGr0RqNUdfWi0G2MHNhmMx0aVACVCFezDwM3BdRiKUm6bvDeQbN26bpAfLSnI9IXvHDAIddcBIX7BgsoQHQzGmh8QzBuBgQyc/V0b6q9Dy3LB1981UKGKayB5TQEB57IHVRx87EjOhgCSEKQCsiugU7gcjJZJznZ4zIDEprNcbSDuqE+XBLUj8/UHKBCKQvnsoK6i1ooYmk7LoWs7JnTCNRDCACYQ0jYYYxGyWFzAK9cNsVlBKrQeeU9TFU5ibc3Krm37WevEMcBBOVLkKOpukUh3eOrOkVlMjUQAAAAA') format('woff2'),
  url('iconfont.woff?t=1548124350966') format('woff'),
  url('iconfont.ttf?t=1548124350966') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1548124350966#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: 12px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.el-icon-newfont-setting:before {
  content: "\e605";
}

.el-icon-newfont-unbind:before {
  content: "\e68a";
}

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

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

   引入样式文件

4. 使用图标

   用 icon 引用:

   用 class 引用:

在线引入css

获取在线样式地址

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

用 less 样式引入

在 el-input 上使用图标