该插件可以通过npm安装。
Using npm:
npm install --save vue-iconfont-online
Using yarn:
yarn add vue-iconfont-online
vue-iconfont-online 在 main.js 内引用即可
JS
import IconFontOnline from 'vue-iconfont-online';
Vue.use(IconFontOnline, {
url: '//at.alicdn.com/t/font_2292720_gpwudclzhf6.css',
symbol: 'alibaba-',
fontFamily: 'alibaba-icon',
fontSize: 22
})
如果要加载多个图标库
import IconFontOnline from 'vue-iconfont-online';
Vue.use(IconFontOnline, [{
url: '//at.alicdn.com/t/font_2292720_gpwudclzhf6.css',
symbol: 'alibaba-',
fontFamily: 'alibaba-icon',
fontSize: 22
},
{
url: '//at.alicdn.com/t/font_1151961_6sy5eu8oe36.css',
symbol: 'shn-',
fontFamily: 'shni',
fontSize: 22
}
])
HTML
<i class="alibaba-seleted"></i>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
url | 阿里巴巴iconfont项目的在线链接 | String | //at.alicdn.com/t/font_2292720_gpwudclzhf6.css |
symbol | 阿里巴巴iconfont项目设置的FontClass/Symbol 前缀 | String | alibaba- |
fontFamily | 阿里巴巴iconfont项目设置的 Font Family | String | alibaba-icon |
fontSize | 图标默认大小 | Number | 16 |
1.选择想要添加的图标
2.单击右上角购物车图标
3.添加至项目
4.选择一个项目或新增一个项目
5.生成代码,此时就获得了图标库的在线链接
6.在“更多操作 -> 编辑项目”中,可以设置图标库的Font Family及FontClass/Symbol 前缀