野宁新之助

# Vue插件:vue-iconfont-online

2020/12/25 15:59:42

Vue 2.x (opens new window) npm (opens new window) npm-downloads (opens new window) Github (opens new window)

English

# 安装

该插件可以通过npm安装。

Using npm:

npm install --save vue-iconfont-online
1

Using yarn:

yarn add vue-iconfont-online
1

# 使用方法

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

# 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 前缀

Last Updated: 12/25/2020, 4:11:05 PM