Merge branch 'feature/icon' into develop

docs/src/App.js

@@ -33,6 +33,11 @@ let App = () => (
         path="/elements/header"
         component={require('./pages/elements/HeaderPage').default}
       />
+      <Route
+        exact
+        path="/elements/icon"
+        component={require('./pages/elements/IconPage').default}
+      />
       <Route
         exact
         path="/elements/slate"

docs/src/pages/elements/IconPage.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import DemoPageLayout from '../../utils/DemoPageLayout';
+import PlayGround from '../../utils/PlayGround';
+import {
+  Icon,
+  Icons,
+  Slate,
+} from '../../../../lib';
+
+let IconPage = () => (
+  <DemoPageLayout
+    title="Icon"
+    desciption="An icon is a glyph used to represent something else"
+  >
+    <h1 className="ts dividing header">Desciption</h1>
+    <PlayGround
+      title="Icon"
+      desciption={
+        <span>
+          To see all the icons, please refer to
+          {' '}
+          <a
+            href="https://semantic-ui.com/elements/icon.html"
+            target="_blank"
+          >
+            Semantic UI docs
+          </a>
+        </span>
+      }
+      component={(
+        <div>
+          <Icon name="add to calendar" />
+          <Icon name="alarm outline" />
+          <Icon name="alarm mute outline" />
+          <Icon name="alarm mute" />
+          <Icon name="alarm" />
+          <Icon name="at" />
+          <Icon name="browser" />
+          <Icon name="bug" />
+          <Icon name="calendar outline" />
+          <Icon name="calendar" />
+          <Icon name="checked calendar" />
+          <Icon name="cloud" />
+          <Icon name="code" />
+          <Icon name="comment outline" />
+          <Icon name="comment" />
+          <Icon name="comments outline" />
+          <Icon name="comments" />
+          <Icon name="copyright" />
+          <Icon name="creative commons" />
+          <Icon name="dashboard" />
+          <Icon name="delete calendar" />
+          <Icon name="external square" />
+          <Icon name="external" />
+          <Icon name="eyedropper" />
+          <Icon name="feed" />
+          <Icon name="find" />
+          <Icon name="hand pointer" />
+          <Icon name="hashtag" />
+          <Icon name="heartbeat" />
+          <Icon name="history" />
+          <Icon name="home" />
+          <Icon name="hourglass empty" />
+          <Icon name="hourglass end" />
+          <Icon name="hourglass full" />
+          <Icon name="hourglass half" />
+          <Icon name="hourglass start" />
+          <Icon name="idea" />
+          <Icon name="image" />
+          <Icon name="inbox" />
+          <Icon name="industry" />
+          <Icon name="lab" />
+          <Icon name="mail outline" />
+          <Icon name="mail square" />
+          <Icon name="mail" />
+          <Icon name="mouse pointer" />
+          <Icon name="options" />
+          <Icon name="paint brush" />
+          <Icon name="payment" />
+          <Icon name="percent" />
+          <Icon name="privacy" />
+          <Icon name="protect" />
+          <Icon name="registered" />
+          <Icon name="remove from calendar" />
+          <Icon name="search" />
+          <Icon name="setting" />
+          <Icon name="settings" />
+          <Icon name="shop" />
+          <Icon name="shopping bag" />
+          <Icon name="shopping basket" />
+          <Icon name="signal" />
+          <Icon name="sitemap" />
+          <Icon name="tag" />
+          <Icon name="tags" />
+          <Icon name="tasks" />
+          <Icon name="terminal" />
+          <Icon name="text telephone" />
+          <Icon name="ticket" />
+          <Icon name="trademark" />
+          <Icon name="trophy" />
+          <Icon name="wif" />
+        </div>
+      )}
+    />
+    <PlayGround
+      title="Grouping"
+      component={(
+        <Slate>
+          <Icons>
+            <Icon name="file audio outline" />
+            <Icon name="file text outline" />
+            <Icon name="file word outline" />
+          </Icons>
+          <span className='header'>
+            行動辦公室
+          </span>
+          <span className='description'>
+            MeowWork 讓你到處都能夠辦公。
+          </span>
+        </Slate>
+      )}
+    />
+  </DemoPageLayout>
+);
+
+export default IconPage;

docs/src/pages/elements/NavigationPage.js

@@ -27,6 +27,12 @@ let NavigationPage = () => (
         meta: '<Header />',
         description: 'To separate text content',
         symbol: <i className="icon header" />,
+      }, {
+        to: '/elements/icon',
+        title: 'Icon',
+        meta: '<Icon />, <Icons />',
+        description: '',
+        symbol: <i className="icon smile" />,
       }, {
         to: '/elements/slate',
         title: 'Slate',

src/Icon.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+class Icon extends Component {
+  render() {
+    let {
+      name,
+      className,
+      ...rest
+    } = this.props;
+    let cx = classNames(
+      name,
+      'icon',
+      className
+    );
+
+    return (
+      <i
+        className={cx}
+        {...rest}
+      />
+    );
+  }
+}
+
+Icon.displayName = 'Icon';
+
+Icon.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+export default Icon;

src/Icons.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import Box from './Box';
+
+class Icons extends Component {
+  render() {
+    let {
+      className,
+      ...rest
+    } = this.props;
+    let cx = classNames(
+      'icons',
+      className
+    );
+
+    return (
+      <Box
+        className={cx}
+        {...rest}
+      />
+    );
+  }
+}
+
+Icons.displayName = 'Icons';
+
+export default Icons;

src/index.js

@@ -5,6 +5,8 @@ export Button from './Button';
 export Buttons from './Buttons';
 export Container from './Container';
 export Header from './Header';
+export Icon from './Icon';
+export Icons from './Icons';
 export Slate from './Slate';
 export Segment from './Segment';
 export Segments from './Segments';