项目中symbol方式使用iconfont的图标

在线链接使用或者在线链接调试

1.获取iconfont.js

        在symbol按钮选择后点击查看链接

 2.引入iconfont.js 

     html中添加script标签，src为生成的在线链接

<script src="http://at.alicdn.com/t/c/font_xx_xx.js"></script>

3.页面使用

3.1 css

symbol引入方式一般会封装一个svg-icon组件，可以在这个组件里面引入一次，或者在全局引入

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

3.2 html

class="icon"是必须的

xlink:href="#icon-xxx"其中#icon取决于项目图标前缀

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

下载文件到本地

1.下载文件，点击下载至本地

        

2.引入iconfont.js

      下载后压缩包有很多文件，symbol方式有用的只有iconfont.js

import '@/assets/font/iconfont.js';

3.同上