Icon

图标。Icon UI 提供与WeLink规范一致的视图。

import React from 'react';
import PropTypes from 'prop-types';
import { Grids, Article } from '@wecode/react-weui';
import './icons.less';

const IconBox = function (props) {
  const { icon, title, desc } = props;
  return (
    <div className="icon-box">
      {icon}
      <div className="icon-box__ctn">
        <h3 className="icon-box__title">{title}</h3>
        <p className="icon-box__desc">{desc}</p>
      </div>
    </div>);
};

IconBox.propTypes = {
  icon: PropTypes.object,
  title: PropTypes.string,
  desc: PropTypes.string
};

export default function IconDemo() {

  return (
    <section>
      <Article style={{ padding: 0 }}>
        <h1>导航栏</h1>
        <section>
          <Grids data={[{
            icon: <i className="icon-nav icon-nav-headPortrait" />,
            label: '默认头像',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-arrowLeft" />,
            label: '返回箭头',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-arrowLeftPress" />,
            label: '返回箭头按压',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-tel" />,
            label: '消息通话',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-telPress" />,
            label: '消息通话按压',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-add" />,
            label: '更多',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-addPress" />,
            label: '更多按压',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-telPhoto" />,
            label: '拨打电话',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-telPhotoPress" />,
            label: '拨打电话按压',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-personalChatSettings" />,
            label: '个人设置',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-personalChatSettingsPress" />,
            label: '个人设置按压',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-groupChatSetting" />,
            label: '群聊信息',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-groupChatSettingPress" />,
            label: '群聊信息按压',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-arrowBottomRed" />,
            label: '下拉箭头',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-editEmail" />,
            label: '邮件新建',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-editEmailPress" />,
            label: '邮件新建按压',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-arrowBottom" />,
            label: '邮件上一页',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-arrowBottomPress" />,
            label: '邮件上一页按压',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-organization" />,
            label: '我的组织',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-organizationPress" />,
            label: '我的组织按压',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-readingHistory" />,
            label: '阅读历史',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-readingHistoryPress" />,
            label: '阅读历史按压',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-cardManage" />,
            label: '卡片管理',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-cardManagePress" />,
            label: '卡片管理按压',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-uploadFile" />,
            label: '云空间上传',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-uploadFilePress" />,
            label: '云空间上传按压',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-more" />,
            label: '更多',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-morePress" />,
            label: '更多按压',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-share" />,
            label: '分享',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-sharePress" />,
            label: '分享按压',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-scan" />,
            label: '扫一扫',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-scanPress" />,
            label: '扫一扫按压',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-search" />,
            label: '搜索',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-nav icon-nav-searchPress" />,
            label: '搜索按压',
            href: 'javascript:;'
          }]}
          />
        </section>
        <h1>12 * 12</h1>
        <section>
          <Grids data={[{
            icon: <i className="icon-12 icon-12-redFlag" />,
            label: '旗标',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-12 icon-12-warn" />,
            label: '异常、警示',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-12 icon-12-share" />,
            label: '转发',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-12 icon-12-attach" />,
            label: '附件',
            href: 'javascript:;'
          }]}
          />
        </section>
        <h1>16 * 16</h1>
        <section>
          <Grids data={[{
            icon: <i className="icon-16 icon-16-magnifier" />,
            label: '放大镜',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-16 icon-16-clear" />,
            label: '清除文字',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-16 icon-16-arrowRight" />,
            label: '右箭头',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-16 icon-16-arrowBottom" />,
            label: '下拉箭头',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-16 icon-16-arrowRightRed" />,
            label: '向右箭头',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-16 icon-16-arrowBottomRed" />,
            label: '下拉箭头',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-16 icon-16-radio" />,
            label: '勾选',
            href: 'javascript:;'
          }]}
          />
        </section>
        <h1>24 * 24</h1>
        <section>
          <Grids data={[{
            icon: <i className="icon-24 icon-24-comment" />,
            label: '默认头像',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-24 icon-24-checkbox" />,
            label: '勾选框',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-24 icon-24-checkboxChecked" />,
            label: '勾选框',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-24 icon-24-checkboxGray" />,
            label: '勾选框',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-24 icon-24-addControl" />,
            label: '添加卡片',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-24 icon-24-deleteControl" />,
            label: '删减卡片',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-24 icon-24-deleteControlGray" />,
            label: '不可删减卡片',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-24 icon-24-exception" />,
            label: 'toast异常状态',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-24 icon-24-delete" />,
            label: '删除',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-24 icon-24-sort" />,
            label: '排序',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-24 icon-24-message" />,
            label: '创建群聊',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-24 icon-24-collect" />,
            label: '收藏未选',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-24 icon-24-collected" />,
            label: '收藏选中',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-24 icon-24-dig" />,
            label: '点赞未选',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-24 icon-24-digged" />,
            label: '点赞选中',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-24 icon-24-follow" />,
            label: '添加关注',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-24 icon-24-addExternalContact" />,
            label: '添加外部联系人',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-24 icon-24-scan" />,
            label: '扫一扫',
            href: 'javascript:;'
          }]}
          />
        </section>
        <h1>文本输入框</h1>
        <section>
          <Grids data={[{
            icon: <i className="icon-input icon-input-emoji" />,
            label: '表情',
            href: 'javascript:;'
          },
          {
            icon: <i className="icon-input icon-input-keyboard" />,
            label: '键盘输入',
            href: 'javascript:;'
          },
          {
            icon: <i className="icon-input icon-input-add" />,
            label: '副媒体入口',
            href: 'javascript:;'
          },
          {
            icon: <i className="icon-input icon-input-voice" />,
            label: '语音输入',
            href: 'javascript:;'
          }
          ]}
          />
        </section>
        <h1>标签栏</h1>
        <section>
          <Grids data={[{
            icon: <i className="icon-tab icon-tab-message" />,
            label: '消息未选',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-tab icon-tab-messageCurrent" />,
            label: '消息选中',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-tab icon-tab-email" />,
            label: '邮件未选',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-tab icon-tab-emailCurrent" />,
            label: '邮件选中',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-tab icon-tab-contact" />,
            label: '通讯录未选',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-tab icon-tab-contactCurrent" />,
            label: '通讯录选中',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-tab icon-tab-business" />,
            label: '业务未选',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-tab icon-tab-businessCurrent" />,
            label: '业务选中',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-tab icon-tab-knowleage" />,
            label: '知识未选',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-tab icon-tab-knowleageCurrent" />,
            label: '知识选中',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-tab icon-tab-cloudDisk" />,
            label: '云空间',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-tab icon-tab-cloudDiskCurrent" />,
            label: '云空间选中',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-tab icon-tab-group" />,
            label: '团队',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-tab icon-tab-groupCurrent" />,
            label: '团队选中',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-tab icon-tab-share" />,
            label: '共享给我的',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-tab icon-tab-shareCurrent" />,
            label: '共享给我的选中',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-tab icon-tab-transportList" />,
            label: '传输列表',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-tab icon-tab-transportListCurrent" />,
            label: '传输列表选中',
            href: 'javascript:;'
          }]}
          />
        </section>
        <h1>文档类</h1>
        <section>
          <Grids data={[{
            icon: <i className="icon-40-folder icon-40-folder-Word" />,
            label: 'Word',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-40-folder icon-40-folder-TXT" />,
            label: 'TXT',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-40-folder icon-40-folder-PPT" />,
            label: 'PPT',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-40-folder icon-40-folder-PDF" />,
            label: 'PDF',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-40-folder icon-40-folder-LOG" />,
            label: 'LOG',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-40-folder icon-40-folder-IPA" />,
            label: 'IPA',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-40-folder icon-40-folder-Excel" />,
            label: 'Excel',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-40-folder icon-40-folder-DMG" />,
            label: 'DMG',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-40-folder icon-40-folder-ZIP" />,
            label: 'ZIP',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-40-folder icon-40-folder-Photo" />,
            label: 'Photo',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-40-folder icon-40-folder-Video" />,
            label: 'Video',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-40-folder icon-40-folder-Code" />,
            label: 'Code',
            href: 'javascript:;'
          }, {
            icon: <i className="icon-40-folder icon-40-folder-Music" />,
            label: 'Music',
            href: 'javascript:;'
          }]}
          />
        </section>
      </Article>
    </section>
  );
}