Icon 图标

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

Q&A

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

注意事项

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

API

Icon

代码示例

基本

展示图标基本使用方法。

查看源码在线预览

import { Icon } from '@alifd/next';
ReactDOM.render(<Icon type="atm" />, mountNode);

图标列表

点击图标复制代码。

查看源码在线预览

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'
];
let customTypes = [];
// The code here is for fusion dev display custom Icon components only
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-list-title {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}
.icon-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.icon-list li {
    display: inline-block;
    width: 140px;
    padding: 30px 0;
    color: #666;
    cursor: pointer;
}
.icon-list li:hover {
    color: #333;
    background-color: #f7f7f7;
}
.icon-list i {
    display: block;
    width: 32px;
    margin: 0 auto;
}
.icon-list span {
    display: block;
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
}
.icon-list-custom-title {
    margin: 20px 0 20px 10px;
    font-size: 20px;
    color: #333;
}

尺寸

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

查看源码在线预览

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);

.icon-sizes {
    margin: 0;
    padding: 0;
    list-style: none;
}
.icon-sizes li {
    display: inline-block;
    width: 80px;
    height: 80px;
}
.icon-sizes i {
    display: block;
    margin: 12px auto 0 auto;
    text-align: center;
}
.icon-sizes span {
    display: block;
    margin-top: 10px;
    text-align: center;
}

自定义样式

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

查看源码在线预览

import { Icon } from '@alifd/next';
ReactDOM.render(
    <div>
        <div className="icon-style-demo">
            <Icon type="success" style={{ color: '#1DC11D', marginRight: '10px' }} />
            This is a success message!
        </div>
        <div className="icon-style-demo">
            <Icon type="warning" style={{ color: '#FFA003', marginRight: '10px' }} />
            This is a warning message!
        </div>
        <div className="icon-style-demo">
            <Icon type="error" style={{ color: '#FF3333', marginRight: '10px' }} />
            This is a failure message!
        </div>
    </div>
    , mountNode);

.icon-style-demo {
    height: 24px;
    line-height: 24px;
    margin-bottom: 10px;
    font-size: 16px;
    color: #333;
}

无障碍

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

查看源码在线预览

import { Icon } from '@alifd/next';
ReactDOM.render(<div>
    button: <br/>
    <Icon type="atm"  role="button"  aria-label="icon atm" style={{ margin:'5px' }}/>
    <Icon type="smile"  role="button"  aria-label="icon smile" style={{ margin:'5px' }}/>
    <br/>
    decoration: <br/>
    <Icon type="success" aria-hidden style={{ margin:'5px' }}/>
</div>, mountNode);

相关区块

暂无相关区块