本文是在vue项目中集成阿里iconfont图标库，本文添加的图标结果案例如下图所示。

具体步骤如下：
1，进入阿里 https://www.iconfont.cn 图标库，登录自己的账号密码，如果没有账号，请先注册账号后登录。
2，在iconfont首页 点击“图标管理”后选择“我的项目”，如下图所示。

3，新建项目，在图标管理中，选择如下图所示的紫色按钮图标，点击后会出现新建项目的弹框，如下面两张图所示。

新建项目图

经过测试，如果前缀是icon，则在使用的时候类似“iconyezi”这种类型，所以在本项目，新建项目时，前缀设置成了“icon-”,使用时就可以“ icon-yezi”这样写,所以在使用项目的时候 这样引用就可以，如下：

<i class="iconfont icon-leibie2 "></i>
<i class="iconfont icon-yezi "></i>

4，添加字体图标到创建的项目中，如下步骤所示。
①在图标库中选择图标
②在图标上，选择图标并点击“添加入库”按钮图标（购物车）
③添加完成后，点击右上角的购物车，如下所示。

5，将图标添加至项目：点击右上角的图标后，会出现如下图所示的界面，点击“添加至项目”后，出现项目列表，选择相应的项目，点击“确定”按钮即可将图标添加到项目中，如下图所示。

6，将项目下载至本地，如下图所示。下载后是个压缩包文件。

7，将下载后的文件添加到vue项目中，解压后的文件如下，可以将demo相关的文件删除。
在项目的src/assets/文件夹下创建icons/iconfont目录（\src\assets\icons\iconfont），

项目中添加的iconfont图标文件

8，在vue文件中使用iconfont图标，步骤如下并如下案例解释，下面是添加图标的案例，其中图中框中是带颜色的图标。

①在vue项目中main.js图标中引入icconfont.css ,如下

 import './assets/icons/iconfont/iconfont.css';

②如若要使用彩色的图标，则需要引入iconfont.js文件，如下：

import '../../assets/icons/iconfont/iconfont.js'

iconfont.js的引入地址可在app.vue中引入，本案例是在引入图标的vue中添加的这句话。
③添加 .icon的css样式，代码如下：

.icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }

注意：如果不引用彩色图标，可以不添加 iconfont.js 和.icon样式

④本案例代码如下：

<template>
    <div>
        引用iconfont的图标
        <br>
        <br>
        <i class="iconfont icon-leibie1" icon-sel></i>
        <br>
        <i class="iconfont icon-yezi-copy  icon-sel"></i>

        <br>
        <svg class="icon myIcon" aria-hidden="true">
            <use xlink:href="#icon-yezi-copy "></use>
        </svg>
        <br>
        <svg class="icon myIcon" aria-hidden="true">
            <use xlink:href="#icon-yezi "></use>
        </svg>
        <br>
        <i class="iconfont icon-leibie2 icon-sel"></i>
        <br>
        <svg class="icon myIcon" aria-hidden="true">
            <use xlink:href="#icon-leibie2 "></use>
        </svg>

    </div>
</template>


<script >

    import '../../assets/icons/iconfont/iconfont.js'
    export default {
        name: "iconTest"
    }
</script>

<style scoped>

    .icon-sel{
       font-size: 30px;
    }
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
    .myIcon{
        font-size: 30px;
    }

</style>