Icon

Example
图标列表
基本用法
尺寸
自定义样式
使用其他源的图标
无障碍支持
API

代码演示 #

图标列表 #

点击图标复制代码。

import ReactDOM from 'react-dom';
import { Message, Icon } from '@alifd/next';
import CopyToClipboard from 'react-copy-to-clipboard';
const types = [
  'smile',
  'cry',
  'success',
  'warning',
  'prompt',
  'error',
  'help',
  'clock',
  'success-filling',
  'delete-filling',
  'favorites-filling',
  'add',
  'minus',
  'arrow-up',
  'arrow-down',
  'arrow-left',
  'arrow-right',
  'arrow-double-left',
  'arrow-double-right',
  'switch',
  'sorting',
  'descending',
  'ascending',
  'select',
  'semi-select',
  'loading',
  'search',
  'close',
  'ellipsis',
  'picture',
  'calendar',
  'ashbin',
  'upload',
  'download',
  'set',
  'edit',
  'refresh',
  'filter',
  'attachment',
  'account',
  'email',
  'atm',
  'copy',
  'exit',
  'eye',
  'eye-close',
  'toggle-left',
  'toggle-right',
  'lock',
  'unlock',
  'chart-pie',
  'chart-bar',
  'form',
  'detail',
  'list',
  'dashboard',
];
let customTypes = [];
if (window.customIcons) {
  customTypes = window.customIcons;
}
const handleCopy = () => Message.success('Copied!');
ReactDOM.render(
  <div>
    <div className="icon-list-title">Click on the icon to copy the code.</div>
    <ul className="icon-list">
      {types.map((type, index) => (
        <CopyToClipboard key={index} text={`<Icon type="${type}" />`} onCopy={handleCopy}>
          <li>
            <Icon type={type} size="xl" />
            <span>{type}</span>
          </li>
        </CopyToClipboard>
      ))}
    </ul>
    {customTypes.length ? (
      <div>
        <div className="icon-list-custom-title">Custom Icon</div>
        <ul className="icon-list">
          {customTypes.map((type, index) => (
            <CopyToClipboard key={index} text={`<Icon type="${type}" />`} onCopy={handleCopy}>
              <li>
                <Icon type={type} size="xl" />
                <span>{type}</span>
              </li>
            </CopyToClipboard>
          ))}
        </ul>
      </div>
    ) : null}
  </div>,
  mountNode
);

基本用法 #

展示图标基本使用方法。

尺寸 #

ICON的尺寸包括：xxs，xs，small，medium，large，xl，xxl，xxxl, inherit。

import ReactDOM from 'react-dom';
import { Icon } from '@alifd/next';
const sizes = ['xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl'];
const inherit = 'inherit';
ReactDOM.render(
  <div>
    <ul className="icon-sizes">
      {sizes.map((size, index) => (
        <li key={index}>
          <Icon type="smile" size={size} />
          <span>{size}</span>
        </li>
      ))}
    </ul>
    <span>{inherit}</span>
    <h4>
      {"Shall I compare thee to a summer's day? "}
      <Icon type="smile" size={inherit} /> <Icon type="set" size={inherit} />
    </h4>
    <h3>
      {'Thou art more lovely and more temperate. '}
      <Icon type="smile" size={inherit} /> <Icon type="set" size={inherit} />
    </h3>
    <h2>
      {'Rough winds do shake the darling buds of May, '}
      <Icon type="smile" size={inherit} /> <Icon type="set" size={inherit} />
    </h2>
    <h1>
      {"And summer's lease hath all too short a date. "}
      <Icon type="smile" size={inherit} /> <Icon type="set" size={inherit} />
    </h1>
  </div>,
  mountNode
);

自定义样式 #

图标字体本质上还是文字，可以使用 style 和 className 设置图标的大小和颜色。

使用其他源的图标 #

直接使用 iconfont 源扩展icon，且不使用定制主题包的方式，支持svg图标

无障碍支持 #

若为装饰性icon，请设置通过设置 aria-hidden 忽略；若为按钮类型icon，请务必设置 role="button" 和 aria-label。

API #

Icon #

参数	说明	类型	默认值
size	指定图标大小可选值 xxs, xs, small, medium, large, xl, xxl, xxxl, inherit	Enum/Number	'medium'
type	指定显示哪种图标	String	-

Icon.createFromIconfontCN #

通过自定义 iconfont源来使用使用svg格式的图片，默认有缓存处理

import { Icon } from '@alifd/next';

const CustomIcon = Icon.createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_1464085_egnk4s8yv2f.js',
});

// 同 Icon 基础元素一样，有相同的 size 设定
ReactDOM.render(
    <div>
        <CustomIcon type="icon-store" size="small"/>
        <CustomIcon type="icon-gift"/>
        <CustomIcon type="icon-pic" size="large"/>
    </div>
, mountNode);

FAQ #

如何添加自定义Icon？ #

默认提供部分基础 icon ，若要添加自定义 icon 可在 Fusion 设计中心新建主题，编辑主题中的Icon组件，完成后发布主题。每个主题是一个 npm 包，npm 包里面包含了主题变量、iconfont 地址等相关代码。在你的项目里引用该自定义主题包，更新主题包的版本即可（前提是你的项目/构建工具支持 Fusion 主题的使用）

无障碍键盘操作指南 #

Icon无键盘操作；
若为装饰性icon，请设置通过设置 aria-hidden 忽略；若为按钮类型icon，请务必设置 role="button" 和 aria-label