feat(Tag): add support of customStyle

close #334

src/components/Tag/Icon.jsx

@@ -15,7 +15,18 @@ class Icon extends PureComponent {
         /**
          * 样式风格
          */
-        styleType: PropTypes.oneOf(StyleType)
+        styleType: PropTypes.oneOf(StyleType),
+        /**
+         * 自定义样式
+         */
+        customStyle: PropTypes.shape({
+            /** 字色/图标色 */
+            color: PropTypes.string,
+            /** 边框色 */
+            borderColor: PropTypes.string,
+            /** 背景色 */
+            background: PropTypes.string
+        })
     };
     render() {
         // eslint-disable-next-line no-unused-vars

src/components/Tag/Icon.md

@@ -1,20 +1,25 @@
 ### 说明
 
-*   这是只有 Icon 的 Tag 组件，用作纯 Icon 标识
+-   这是只有 Icon 的 Tag 组件，用作纯 Icon 标识
 
 ### 演示
 
-*   功能演示
+#### 功能演示
 
 ```js {"codepath": "icon.jsx"}
 ```
 
-*   样式风格 - styleType
+#### 样式风格 - styleType
 
 ```js {"codepath": "icon-styleType.jsx"}
 ```
 
-*   自定义 icon - icon
+#### 自定义 icon - icon
 
 ```js {"codepath": "icon-icon.jsx"}
 ```
+
+#### 自定义样式 - customStyle
+
+```js {"codepath": "icon-customStyle.jsx"}
+```

src/components/Tag/Tag.jsx

@@ -36,7 +36,20 @@ class Tag extends PureComponent {
         /**
          * 是否禁用
          */
-        disabled: PropTypes.bool
+        disabled: PropTypes.bool,
+        /**
+         * 自定义样式
+         */
+        customStyle: PropTypes.shape({
+            /** 字色/图标色 */
+            color: PropTypes.string,
+            /** 边框色 */
+            borderColor: PropTypes.string,
+            /** 背景色 */
+            background: PropTypes.string,
+            /** 关闭按钮 hover 背景色 */
+            closeIconHoverBackground: PropTypes.string
+        })
     };
     static defaultProps = {
         styleType: 'default'

src/components/Tag/Tag.md

@@ -28,3 +28,8 @@
 
 ```js {"codepath": "tag-icon.jsx"}
 ```
+
+#### 自定义样式 - customStyle
+
+```js {"codepath": "tag-customStyle.jsx"}
+```

src/components/Tag/__demo__/icon-customStyle.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import Tag from 'src/components/Tag';
+
+// demo start
+
+class Demo extends React.Component {
+    render() {
+        return (
+            <div>
+                <div className="demo-wrap">
+                    <Tag.Icon icon="circle-fill" styleType="orange" closable></Tag.Icon>
+                </div>
+                <div className="demo-wrap">
+                    <Tag.Icon
+                        icon="circle-fill"
+                        styleType="orange"
+                        closable
+                        customStyle={{
+                            color: 'white',
+                            background: 'red',
+                            borderColor: 'orange'
+                        }}
+                    ></Tag.Icon>
+                </div>
+            </div>
+        );
+    }
+}
+// demo end
+
+export default Demo;

src/components/Tag/__demo__/tag-customStyle.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import Tag from 'src/components/Tag';
+
+// demo start
+
+class Demo extends React.Component {
+    render() {
+        return (
+            <div>
+                <div className="demo-wrap">
+                    <Tag icon="circle-fill" styleType="orange" closable>
+                        Content
+                    </Tag>
+                </div>
+                <div className="demo-wrap">
+                    <Tag
+                        icon="circle-fill"
+                        styleType="orange"
+                        closable
+                        customStyle={{
+                            color: 'white',
+                            background: 'red',
+                            borderColor: 'orange',
+                            closeIconHoverBackground: 'pink'
+                        }}
+                    >
+                        Content
+                    </Tag>
+                </div>
+            </div>
+        );
+    }
+}
+// demo end
+
+export default Demo;