Icon 图标

命名规则#

该规范适用于 UED上传图标时的命名，和前端的 Class命名

font-family 的命名建议用 xxxIcon，eg: NextIcon
单词字母全部小写，用中划线连接单词
实心和空心图标保持同名，用 -filling 来区分，比如 email(空心) 和 email-filling(实心)
命名顺序：[icon名称]-[内容语义(可选)]-[形状(可选)]-[方向(可选)]-[filling(可选)]

如何使用#

使用 <Icon /> 标签声明组件，指定图标对应的 type 属性，示例代码如下:

<Icon type="email" />

最终会渲染为：

<i class="next-icon next-icon-${type}"></i>

本地部署#

图标组件使用 iconfont.cn，默认公网可访问。

API#

属性	说明	类型	默认值
type	指定显示哪种图标	String	无
size	指定 size的大小，可选 xxs, xs, small, medium[默认], large, xl, xxl, xxxl	String	medium

代码演示


import 'blue/lib/icon/index.scss';
import Icon from 'blue/lib/icon';

import 'blue/lib/feedback/index.scss';
import Feedback from 'blue/lib/feedback';

import CopyToClipboard from 'react-copy-to-clipboard';

const types = [
    'all', 'cart', 'comments', 'cry', 'email',
    'favorite', 'folder', 'form', 'help', 'refresh',
    'set', 'training', 'account', 'atm', 'clock',
    'attachment', '3column', '4column', 'discount', 'service',
    'print', 'box', 'process', 'bags', 'electronics',
    'gifts', 'lights', 'auto', 'browse', 'atm-away',
    'scanning', 'compare', 'filter', 'pin', 'history',
    'similar-product', 'link', 'cut', 'table', 'nav-list',
    'image-text', 'text', 'move', 'subtract', 'dollar',
    'office', 'operation', 'download', 'map', 'bad',
    'good', 'skip', 'play', 'stop', 'compass',
    'security', 'share', 'store', 'phone', 'ellipsis',
    'email-filling', 'favorites-filling', 'account-filling', 'credit-level', 'credit-level-filling',
    'mobile-phone', 'smile', 'personal-center', 'arrow-up-filling', 'arrow-right',
    'arrow-left', 'arrow-down', 'arrow-up', 'add', 'minus',
    'delete-filling', 'edit', 'error', 'select', 'ashbin',
    'calendar', 'time', 'success', 'warning', 'search',
    'display', 'category', 'prompt', 'arrow-down-filling', 'sorting',
    'ascending', 'descending', 'success-filling', 'picture', 'close', 'semi-select',
    'tag-subscript', 'survey', 'loading', 'arrow-double-left', 'arrow-double-right'
];

const handleCopy = () => Feedback.toast.success('Copied!');

ReactDOM.render(
    <div>
        <h2>点击复制剪贴板</h2>
        <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>
    </div>
, mountNode);

.icon-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.icon-list li {
    display: inline-block;
    width: 160px;
    height: 80px;
    cursor: pointer;
}

.icon-list li:hover {
    background-color: #f7f7f7;
}

.icon-list i {
    display: block;
    margin: 12px auto 0 auto;
    text-align: center;
}

.icon-list span {
    display: block;
    margin-top: 10px;
    text-align: center;
}

基本

简单的图标展示。

import 'blue/lib/icon/index.scss';
import Icon from 'blue/lib/icon';

const moreHeightStyle = {
    height: '40px',
    padding: '0 10px',
    marginBottom: '5px',
    lineHeight: '40px',
    background: '#ccc'
};
const absWrapperStyle = {
    position: 'relative',
    width: '220px',
    height: '40px',
    lineHeight: '40px',
    background: '#ccc'
};
const absStyle = {
    position: 'absolute',
    right: '10px'
};

ReactDOM.render((
    <div className="icon-list-style">
        <h3>高度40, 行高40</h3>
        <div style={moreHeightStyle}><Icon type="phone" size="xxs"/> 电话 <Icon type="phone" size="xxs"/> phone</div>
        <div style={moreHeightStyle}><Icon type="phone" size="xs"/> 电话 <Icon type="phone" size="xs"/> phone</div>
        <div style={moreHeightStyle}><Icon type="phone" size="small"/> 电话 <Icon type="phone" size="small"/> phone</div>
        <div style={moreHeightStyle}><Icon type="phone" size="medium"/> 电话 <Icon type="phone" size="medium"/> phone
        </div>
        <div style={moreHeightStyle}><Icon type="phone" size="large"/> 电话 <Icon type="phone" size="large"/> phone</div>
        <div style={moreHeightStyle}><Icon type="phone" size="xl"/> 电话 <Icon type="phone" size="xl"/> phone</div>
        <div style={moreHeightStyle}><Icon type="phone" size="xxl"/> 电话 <Icon type="phone" size="xxl"/> phone</div>
        <h3>ICON 绝对定位时的对齐</h3>
        <div style={absWrapperStyle}><Icon style={absStyle} type="phone"/> 电话</div>
    </div>
), mountNode);

对齐

不同尺寸, 不同文本类型下 ICON 的对齐

import 'blue/lib/icon/index.scss';
import Icon from 'blue/lib/icon';

const sizes = ['xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl'];

ReactDOM.render((
    <ul className="icon-sizes">
        {sizes.map((size, index) => (
            <li key={index}>
                <Icon type="smile" size={size} />
                <span>{size}</span>
            </li>))}
    </ul>
), 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;
}

尺寸

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