APIbeta

图标

图标注册

提供了全局图标的解决方法; 可以使用如下的图标管理api进行图标设置.

1
2
3
4
5
6
7
8
9
import bpui from 'bpui.js';

/* 使用css类名bp-iconBack, 设置名为back的图标 */
/* 第三个参数表示icon font-family 名称; 默认为 bp-icon, 传递其他名称可使用其他字体图标 */
bpui.libs.icons.registerFontIcon('back', 'bp-iconBack');
bpui.libs.icons.registerFontIcon('back', 'bp-iconBack', 'bp-icon');

/* 使用svg图片设置名为back的图标 */
bpui.libs.icons.registerSvgIcon('back', require('~assets/back.svg'));

(组合图标) registerFontIcon的返回值为图标的子节点集合, 可以继续添加子图标

使用

设置完图标后, 可以在vue组件中按如下方式使用:

1
2
3
<template>
  <bp-icon name="back" />
</template>

example

See the Pen bpui-style-icon by brainpoint (@brainpoint) on CodePen.

图标别名

可以使用如下方法为图标添加一个别名

1
bpui.libs.icons.registerAliasIcon(aliasName, srcName);

设置完成后, 使用别名图标就等同于使用原名称对应的图标, 但是如果对别名设置图标, 就是一个新图标, 而不影响原图标.

bp-icon 组件

bp-icon是随libs插件注册的全局组件, 表示指定名称的图标;

其拥有如下常用属性:

名称 类型 是否必须 描述
name string 是 图标名称; 预注册的图标名称可以查下方表格
width string (默认32px) 图标的宽度; 可以指定如 px, rem 等尺寸单位;
- 仅指定width或height则认为两个值相同
- 最小值不能比网页最小字号还小; 通常为: 最小值为12px
height string (默认32px) 图标的高度; 可以指定如 px, rem 等尺寸单位;
同width
color string 图标颜色 (仅font图标有效)

各组件内部使用预设图标, 并提供图标的名称说明, 可供自定义主题

图标组

注册图标时, 可以将一组图标组合成一个图标使用;

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Icons.registerFontIcon('loading', 'bp-iconLoading')
      .push(
        'path1',
        'path2',
        'path3',
        'path4',
        'path5',
        'path6',
        'path7',
        'path8',
        'path9',
        'path10',
        'path11',
        'path12',
      );

使用 名为 loading 的图标就等同于使用一组图标.

预设的字体图标名称

名称 名称 名称
arrowUp arrowDown arrowLeft
arrowRight cancel delete
edit heartFill heart
locationPin location menu
minus more ok
plus setting starFill
star user loading

默认注册的语句为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Icons.registerFontIcon('arrowDown', 'bp-iconArrowDown');
Icons.registerFontIcon('arrowLeft', 'bp-iconArrowLeft');
Icons.registerFontIcon('arrowRight', 'bp-iconArrowRight');
Icons.registerFontIcon('arrowUp', 'bp-iconArrowUp');
Icons.registerFontIcon('cancel', 'bp-iconCancel');
Icons.registerFontIcon('delete', 'bp-iconDelete');
Icons.registerFontIcon('edit', 'bp-iconEdit');
Icons.registerFontIcon('heartFill', 'bp-iconHeartFill');
Icons.registerFontIcon('heart', 'bp-iconHeart');
Icons.registerFontIcon('locationPin', 'bp-iconLocationPin');
Icons.registerFontIcon('location', 'bp-iconLocation');
Icons.registerFontIcon('menu', 'bp-iconMenu');
Icons.registerFontIcon('minus', 'bp-iconMinus');
Icons.registerFontIcon('more', 'bp-iconMore');
Icons.registerFontIcon('ok', 'bp-iconOk');
Icons.registerFontIcon('plus', 'bp-iconPlus');
Icons.registerFontIcon('setting', 'bp-iconSetting');
Icons.registerFontIcon('starFill', 'bp-iconStarFill');
Icons.registerFontIcon('star', 'bp-iconStar');
Icons.registerFontIcon('user', 'bp-iconUser');
Icons.registerFontIcon('loading', 'bp-iconLoading')
      .push(
        'path1',
        'path2',
        'path3',
        'path4',
        'path5',
        'path6',
        'path7',
        'path8',
        'path9',
        'path10',
        'path11',
        'path12',
      );

方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/**
* @desc: 列表所有的图标.
* @return: 
*/
bpui.libs.icons.list(): string[];

/**
* @desc: 注册svg图标.
*/
bpui.libs.icons.registerSvgIcon(iconName:string, filePath:string):void;
/**
* @desc: 注册字体图标.
*         e.g. registerFontIcon(iconName, 'bp-iconBack');
* @param className: 可以指定一个类名或一组类名.
* @param familyClassName: 指定的字体类名. 默认为 bp-icon
* @return 返回当前的图标, 可以继续添加子图标.
*/
bpui.libs.icons.registerFontIcon(iconName:string, className:string, familyClassName?:string):string[];

/**
* @desc: 为指定图标注册一个新名称.
*        如果名称已经存在则发生异常.
*/
bpui.libs.icons.registerAliasIcon(aliasName:string, srcIconName:string):void;