feat: Add icon

docs/gatsby-node.js

@@ -11,7 +11,8 @@ exports.onCreateWebpackConfig = ({ actions }) => {
     resolve: {
       modules: [path.resolve(__dirname, 'node_modules')],
       alias: {
-        'wizard-ui': path.resolve(__dirname, '../src/index.tsx')
+        'wizard-ui': path.resolve(__dirname, '../src/index.tsx'),
+        'icomoon-icon': path.resolve (__dirname, '../src/style/icomoon/selection.json')
       }
     },
   })

docs/src/Layout/style.scss

@@ -1,3 +1,4 @@
+@import '../../../src/style/icomoon/style.css';
 .pre {
   border-radius: 4px;
   margin-bottom: 10px;

docs/src/components/Icon/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import getIcons from '../../utils/get-icon';
+import './style.scss';
+
+const icons = getIcons();
+
+const Icon = () => (
+  <div className="Icon">
+    <p>总共有 {icons.length} 个图标</p>
+    <div className="Icon__ul">
+      {icons.map((icon, index) => (
+          <div className="Icon__li" key={index}>
+            <span className={`icon icon-${icon.name}`} />
+            <div>{icon.name}</div>
+          </div>
+        ))}
+    </div>
+  </div>
+)
+
+export default Icon;

docs/src/components/Icon/style.scss

@@ -0,0 +1,20 @@
+.Icon {
+  &__ul {
+    background-color: #edeef2;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  &__li {
+    width: 20%;
+    text-align: center;
+    padding: 25px 10px;
+    &:hover {
+      background-color: #dbddec;
+    }
+    .icon {
+      font-size: 20px;
+      display: block;
+      margin-bottom: 10px;
+    }
+  }
+}

docs/src/components/Playground/index.js

@@ -1,34 +1,37 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import * as libs from 'wizard-ui';
+import AllIcon from '../Icon';
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
 import { Button } from 'react-bootstrap';
 import './style.scss';
 
 
-export default ({ isShow, children, ...props }) => {
+export default ({ isShow, children, previewOnly }) => {
   const [show, setShow] = useState(false);
   const toggle = () => {
     setShow(!show);
   }
   return (
-    <LiveProvider scope={{ ReactDOM, ...libs }} code={children.trim()}>
-      <div className={`Playground ${(show || isShow) ? 'show' : ''}`}>
-        {isShow ? (
-          <LiveEditor disabled/>
-        ) : (
-          <>
-            <div className="Playground__Error">
-              <LiveError />
-            </div>
-            <div className="Playground__View">
-              <LivePreview />
-              <Button bsStyle="link" onClick={toggle}>{show ? '隐藏代码' : '展开代码'}</Button>
-            </div>
-            {show && <LiveEditor />}
-          </>
-        )}
-      </div>
+    <LiveProvider scope={{ ReactDOM, AllIcon, ...libs }} code={children.trim()}>
+      { previewOnly ? <LivePreview/> : (
+        <div className={`Playground ${(show || isShow) ? 'show' : ''}`}>
+          {isShow ? (
+            <LiveEditor disabled/>
+          ) : (
+            <>
+              <div className="Playground__Error">
+                <LiveError />
+              </div>
+              <div className="Playground__View">
+                <LivePreview />
+                <Button bsStyle="link" onClick={toggle}>{show ? '隐藏代码' : '展开代码'}</Button>
+              </div>
+              {show && <LiveEditor />}
+            </>
+          )}
+        </div>
+      )}
     </LiveProvider>
   )
 }

docs/src/components/PropTable/index.js

@@ -40,11 +40,7 @@ const PropTable = props => {
         }) || {};
         const currentProps = lodash.get(current, 'node.props', []);
         if (lodash.isEmpty(currentProps)) {
-          return (
-            <div>
-              暂无
-            </div>
-          )
+          return null;
         }
         return (
           <div className="PropTable">

docs/src/components/SideNav/index.js

@@ -15,6 +15,7 @@ const SIDE_NAV = {
     heading: '组件',
     items: [
       { key: 'badge', value: '徽标数' },
+      { key: 'icon', value: '图标' },
     ]
   }
 }

docs/src/constants/index.js

@@ -4,5 +4,6 @@ export const HEADINGS = {
   'resource-status': '资源/数据状态',
   size: '尺寸大小',
   'max-value': '封顶数值',
-  message: '消息展示'
+  message: '消息展示',
+  'all-icons': '所有图标',
 }

docs/src/pages/components/badge.mdx

@@ -16,7 +16,7 @@ date: 2019-05-21
 
 ### 资源/数据状态
 1. 状态颜色围绕文本展示。默认为 danger：
-```jsx divide=true
+```jsx
 <div>
   <Badge count="关闭" status="default"/>
   <Badge count="健康" status="success"/>

docs/src/pages/components/icon.mdx

@@ -0,0 +1,21 @@
+---
+link: components/icon
+title: icon 图标
+author: kailang
+date: 2019-05-21
+---
+
+语义化矢量图标。通过 [icomoon](https://icomoon.io) 将 SVG 转成字体图标得到。
+
+## 使用场景
+直观展示某个资源或者某种状态。
+
+## 代码展示
+```jsx
+<Icon type="os-search-role"/>
+```
+
+## 所有图标
+```jsx previewOnly
+<AllIcon/>
+```

docs/src/utils/get-icon.js

@@ -0,0 +1,9 @@
+import * as iconJson from 'icomoon-icon';
+
+export default function getIconsName () {
+  return iconJson.icons.map (icon => ({
+    name: icon.properties.name,
+    tag: icon.icon.tags[0] || '暂无',
+  }));
+}
+// 

src/interface.tsx

@@ -7,4 +7,9 @@ export interface BadgeProps {
   overflowCount?: number;
   text?: string;
   title?: string;
+}
+
+export interface IconProps {
+  type: string,
+  className?: string,
 }

src/lib/Icon/index.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { IconProps } from '../../interface';
+
+const Icon: React.FC<IconProps> = props => {
+  const { type, className } = props;
+  const cls = `${className} icon icon-${type}`;
+  return <span className={cls}/>;
+}
+
+Icon.propTypes = {
+  /** 图标类型 */
+  type: PropTypes.string.isRequired,
+  /** css 类 */
+  className: PropTypes.string
+}
+
+export default Icon;

src/lib/Icon/style.scss

@@ -0,0 +1 @@
+@import '../../style/icomoon/style.css';

src/lib/index.tsx

@@ -1,5 +1,7 @@
 import Badge from './Badge';
+import Icon from './Icon';
 
 export {
   Badge,
+  Icon,
 }

src/style/icomoon/Read Me.txt

@@ -0,0 +1,7 @@
+Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
+
+To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
+
+You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
+
+You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

src/style/icomoon/demo-files/demo.css

@@ -0,0 +1,152 @@
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 1em;
+  line-height: 1.5;
+  color: #555;
+  background: #fff;
+}
+h1 {
+  font-size: 1.5em;
+  font-weight: normal;
+}
+small {
+  font-size: .66666667em;
+}
+a {
+  color: #e74c3c;
+  text-decoration: none;
+}
+a:hover, a:focus {
+  box-shadow: 0 1px #e74c3c;
+}
+.bshadow0, input {
+  box-shadow: inset 0 -2px #e7e7e7;
+}
+input:hover {
+  box-shadow: inset 0 -2px #ccc;
+}
+input, fieldset {
+  font-family: sans-serif;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+input {
+  color: inherit;
+  line-height: 1.5;
+  height: 1.5em;
+  padding: .25em 0;
+}
+input:focus {
+  outline: none;
+  box-shadow: inset 0 -2px #449fdb;
+}
+.glyph {
+  font-size: 16px;
+  width: 15em;
+  padding-bottom: 1em;
+  margin-right: 4em;
+  margin-bottom: 1em;
+  float: left;
+  overflow: hidden;
+}
+.liga {
+  width: 80%;
+  width: calc(100% - 2.5em);
+}
+.talign-right {
+  text-align: right;
+}
+.talign-center {
+  text-align: center;
+}
+.bgc1 {
+  background: #f1f1f1;
+}
+.fgc1 {
+  color: #999;
+}
+.fgc0 {
+  color: #000;
+}
+p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.mvm {
+  margin-top: .75em;
+  margin-bottom: .75em;
+}
+.mtn {
+  margin-top: 0;
+}
+.mtl, .mal {
+  margin-top: 1.5em;
+}
+.mbl, .mal {
+  margin-bottom: 1.5em;
+}
+.mal, .mhl {
+  margin-left: 1.5em;
+  margin-right: 1.5em;
+}
+.mhmm {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.mls {
+  margin-left: .25em;
+}
+.ptl {
+  padding-top: 1.5em;
+}
+.pbs, .pvs {
+  padding-bottom: .25em;
+}
+.pvs, .pts {
+  padding-top: .25em;
+}
+.unit {
+  float: left;
+}
+.unitRight {
+  float: right;
+}
+.size1of2 {
+  width: 50%;
+}
+.size1of1 {
+  width: 100%;
+}
+.clearfix:before, .clearfix:after {
+  content: " ";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+.hidden-true {
+  display: none;
+}
+.textbox0 {
+  width: 3em;
+  background: #f1f1f1;
+  padding: .25em .5em;
+  line-height: 1.5;
+  height: 1.5em;
+}
+#testDrive {
+  display: block;
+  padding-top: 24px;
+  line-height: 1.5;
+}
+.fs0 {
+  font-size: 16px;
+}
+.fs1 {
+  font-size: 32px;
+}
+