Vue 使用 vue-svg-icon

1. 阿里巴巴矢量图

• 选择需要的字体修改参数
• 选择SVG下载

2.IcoMoon

点击右上角"icoMoon App"

点击左上角"Import Icons"

选择下载的 svg 文件,点击"打开"按钮

页面上会多一个"Untitled Set"选项,下面的小图标就是导入的本地 svg 文件

点击选择这些小图标,点击右下角"Generate Font"生成字体

鼠标移入到图标的时候,下面会显示"Get Code",点击查看 (此步骤可省略)

点击顶部"Preferences"参数选择按钮,修改 Font Name: elm-icon, 其他选项默认即可

每个 icon 的名字也建议修改一下, 方便引用

点击右下角"Download"下载并解压

3.导入

打开 icomoon 文件夹

把 fonts 文件夹下的所有文件复制到 src/assets/fonts 文件夹下

把 style.css 文件改名为 icomoon.css, 并复制到 src/assets/fonts 文件夹下

@font-face {    font-family:'icomoon';    src:url('icomoon.eot?ewmhat');    src:url('icomoon.eot?ewmhat#iefix')    format('embedded-opentype'),    url('icomoon.ttf?ewmhat')format('truetype'),    url('icomoon.woff?ewmhat')format('woff'),    url('icomoon.svg?ewmhat#icomoon')format('svg');    font-weight:normal;    font-style:normal;}.icomoon{    font-family:"icomoon"!important;    font-size:16px;    font-style:normal;    -webkit-font-smoothing:antialiased;    -moz-osx-font-smoothing:grayscale;}
#注册svg，与icomoon.svg文件里的glyph-name对应。
.icon-olivebranch:before{    content:"\e900";}
.icon-recharge:before{    content:"\e901";}

4. 引入

进入 src/main.js

import './assets/fonts/icomoon.css'

5. 使用

<i class="icomoon icon-recharge"></i><i class="icomoon icon-olivebranch" style="font-size:50px;"></i>

效果：

可在样式里设置大小及颜色。