如何在vue里面使用icomoon

icomoon是什么？

打开IcoMoon网站往往会给人一种错觉，误认为跟上面罗列的字体网站一样，就是展示。
其实非也，IcoMoon的水要深多了。
这么说吧：假设整个上海梅园地区有100家卖衣服的小店，其中有99家就是拿货然后卖衣服给顾客（这就是大搜罗的icon font们）；但是，其中有一家店不仅卖衣服，还可以根据用户需求定制衣服，甚至还可以把别家店的衣服按照顾客要求进行改制，且适用于高矮胖瘦，古今中外给类人群，而且还有穿衣说明，模特试穿以及打包送货上门服务（这就是本文的IcoMoon），最最关键的是，这家店是免费的。
体现在IcoMoon上就是：提供600+字符，您可以根据自己需求定制（如就选两个）；可以导入其他字体，也进行特别定制（类似fontforge功能）；定制字体提供打包导出功能（省去了字体转换），兼容IE6+，现代浏览器以及各类手机设备，且有demo实例，并对字符进行了HTML转化。
可谓图标字体一条龙服务，又称“图标解决方案”！

使用方法

1、打开icomoon的官网,选择自己需要的图标，当然你也可以点击左上角的’import icons’导入自己的svg格式的图标。
选择完需要的图片后点击下面的creat font
然后点击download就会把字体图标下载到本地。
2、解压压缩包获得以下文件
3、在自己的vue项目src文件下创建一个’common’文件夹，里面再分别建’fonts’和’stylus’文件夹，把解压下来的icomoon文件夹里面fonts文件夹下的所有文件拷贝到vue项目里面的fonts文件夹下面，然后把 里面的style.css拷贝到vue项目里面的stylus下面，因为我这个项目用的是stylus预处理器，所以我把文件改为了style.styl
vue项目里面的路径如图
4、在vue项目里面的main.js里面引入style.styl

import './common/stylus/index.styl'

5、然后就可以在组件里面用.class的发法使用icmoon图标啦

需要注意的坑

,此处的路径需要更改为

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?yho9ht');
  src:  url('../fonts/icomoon.eot?yho9ht#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?yho9ht') format('truetype'),
    url('../fonts/icomoon.woff?yho9ht') format('woff'),
    url('../fonts/icomoon.svg?yho9ht#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}