Icon图标

图标的命名规范

我们为每个图标赋予了语义化的命名,命名规则如下:

  • 实心和描线图标保持同名,用 -o 来区分,比如 question-circle(实心) 和 question-circle-o(描线);

  • 命名顺序:[icon名]-[形状可选]-[描线与否]-[方向可选]

如何使用 (WEB 版)

  1. <Icon [type]="'check'"></Icon>

提示

现在,我们只支持内置的 ‘check-circle’, ‘check’, ‘check-circle-o’, ‘cross-circle’, ‘cross’, ‘cross-circle-o’, ‘up’, ‘down’, ‘left’, ‘right’, ‘ellipsis’, ‘loading’ 这些 icon 类型,不再默认支持其他自定义类型的 icon。你如果需要用你自定义的 icon 类型,有这几种方法:

  1. 使用自己的 iconfont 文件
  2. 其他方法,可以复用我们已经提供的 .am-icon 样式名

代码演示

基本用法

最简单的用法。

  1. import { Component, TemplateRef } from '@angular/core';
  2. @Component({
  3. selector: 'demo-icon-basic',
  4. template: `
  5. <Grid [data]="data" [columnNum]="3"></Grid>
  6. `
  7. })
  8. export class DemoIconBasicComponent {
  9. list = [
  10. 'check-circle',
  11. 'check',
  12. 'check-circle-o',
  13. 'cross-circle',
  14. 'cross',
  15. 'cross-circle-o',
  16. 'up',
  17. 'down',
  18. 'left',
  19. 'right',
  20. 'ellipsis',
  21. 'loading'
  22. ];
  23. data = this.list.map(item => ({
  24. icon: item,
  25. text: item
  26. }));
  27. }

大小

  1. import { Component, TemplateRef } from '@angular/core';
  2. @Component({
  3. selector: 'demo-icon-size',
  4. template: `
  5. <Grid [data]="data" [columnNum]="5" [activeStyle]="false"></Grid>
  6. `
  7. })
  8. export class DemoIconSizeComponent {
  9. size = ['xxs', 'xs', 'sm', 'md', 'lg'];
  10. data = this.size.map(item => ({
  11. icon: 'search',
  12. text: item,
  13. size: item
  14. }));
  15. }

Icon图标 - 图1

API

参数说明类型默认值
[type]内置 icon 名称 或 unicodestring-
[size]图标大小‘xxs’ | ‘xs’ | ‘sm’ | ‘md’ | ‘lg’‘md’
[color]图标颜色string‘#000’