Vue插件：vue-iconfont-online

# Vue插件：vue-iconfont-online

2020/12/25 15:59:42

(opens new window) (opens new window) (opens new window) (opens new window)

# 安装

该插件可以通过npm安装。

Using npm:

npm install --save vue-iconfont-online

Using yarn:

yarn add vue-iconfont-online

# 使用方法

vue-iconfont-online 在 main.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
})

1
2
3
4
5
6
7

如果要加载多个图标库

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
  }
])

1
2
3
4
5
6
7
8
9
10
11
12
13
14

HTML

<i class="alibaba-seleted"></i>

# Options

参数	说明	类型	默认值
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

# iconfont 图标库如何生成在线链接

阿里巴巴矢量图标库 (opens new window)

1.选择想要添加的图标

2.单击右上角购物车图标

3.添加至项目

4.选择一个项目或新增一个项目

5.生成代码，此时就获得了图标库的在线链接

6.在“更多操作 -> 编辑项目”中，可以设置图标库的Font Family及FontClass/Symbol 前缀