feat(Icon): suport size of inherit

alibaba-fusion · Jan 30, 2019 · 48e7f1d · 48e7f1d
1 parent aaeda77
commit 48e7f1d
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 37 deletions.
diff --git a/docs/icon/demo/size.md b/docs/icon/demo/size.md
@@ -2,14 +2,14 @@
 
 - order: 2
 
-ICON的尺寸包括：`xxs`，`xs`，`small`，`medium`，`large`，`xl`，`xxl`，`xxxl`。
+ICON的尺寸包括：`xxs`，`xs`，`small`，`medium`，`large`，`xl`，`xxl`，`xxxl`, `inherit`。
 
 :::lang=en-us
 # Size
 
 - order: 2
 
-ICON's sizes include:`xxs`，`xs`，`small`，`medium`，`large`，`xl`，`xxl`，`xxxl`。
+ICON's sizes include:`xxs`，`xs`，`small`，`medium`，`large`，`xl`，`xxl`，`xxxl`, `inherit`。
 
 :::
 ---
@@ -18,15 +18,31 @@ ICON's sizes include:`xxs`，`xs`，`small`，`medium`，`large`，`xl`，`xxl`
 import { Icon } from '@alifd/next';
 
 const sizes = ['xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl'];
-
+const inherit = 'inherit';
 ReactDOM.render((
-    <ul className="icon-sizes">
-        {sizes.map((size, index) => (
-            <li key={index}>
-                <Icon type="smile" size={size} />
-                <span>{size}</span>
-            </li>))}
-    </ul>
+    <div>
+        <ul className="icon-sizes">
+            {sizes.map((size, index) => (
+                <li key={index}>
+                    <Icon type="smile" size={size} />
+                    <span>{size}</span>
+                </li>))}
+        </ul>
+
+        <span>{inherit}</span>
+        <h4>
+            Shall I compare thee to a summer's day? <Icon type="smile" size={inherit} /> <Icon type="set" size={inherit} />
+        </h4>
+        <h3>
+            Thou art more lovely and more temperate. <Icon type="smile" size={inherit} /> <Icon type="set" size={inherit} />
+        </h3>
+        <h2>
+           Rough winds do shake the darling buds of May,  <Icon type="smile" size={inherit} /> <Icon type="set" size={inherit} />
+        </h2>
+        <h1>
+           And summer's lease hath all too short a date.  <Icon type="smile" size={inherit} /> <Icon type="set" size={inherit} />
+        </h1>
+    </div>
 ), mountNode);
 
 ````

diff --git a/docs/icon/index.en-us.md b/docs/icon/index.en-us.md
@@ -13,5 +13,5 @@
 
 | Param | Descripiton  | Type  | Default Value |
 | ---- | ---------------------------------------------------- | -------- | ------------ |
-| size | To set the icon size<br><br>**option**:<br>'xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl' | Enum   | 'medium' |
+| size | To set the icon size<br><br>**option**:<br>'xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl', 'inherit' | Enum   | 'medium' |
 | type | Specify which icon to display                         | String   | -        |
diff --git a/docs/icon/index.md b/docs/icon/index.md
@@ -17,7 +17,7 @@
 
 ### Icon
 
-| 参数   | 说明                                                                                     | 类型     | 默认值      |
-| ---- | -------------------------------------------------------------------------------------- | ------ | -------- |
-| size | 指定图标大小<br><br>**可选值**:<br>'xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl' | Enum   | 'medium' |
-| type | 指定显示哪种图标                                                                               | String | -        |
+| 参数   | 说明                                                                                                | 类型     | 默认值      |
+| ---- | ------------------------------------------------------------------------------------------------- | ------ | -------- |
+| size | 指定图标大小<br><br>**可选值**:<br>'xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl', 'inherit' | Enum   | 'medium' |
+| type | 指定显示哪种图标                                                                                          | String | -        |
diff --git a/src/core/util/_mixin.scss b/src/core/util/_mixin.scss
@@ -416,27 +416,29 @@
     }
 
     // Chrome不支持小于12px的字体，故采用缩放的方式缩小字体
-    @if ($size < 12) {
-        @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
-            @if ($transform) {
-                transform: scale($size / $icon-s) $transform;
-            } @else {
-                transform: scale($size / $icon-s);
-            }
-            @if ($marginLeft) {
-                margin-left: $marginLeft - ($icon-s - $size) / 2;
-            } @else {
-                margin-left: -($icon-s - $size) / 2;
-            }
-            @if ($marginRight) {
-                margin-right: $marginRight - ($icon-s - $size) / 2;
-            } @else {
-                margin-right: -($icon-s - $size) / 2;
-            }
-
-            &:before {
-                width: $icon-s;
-                font-size: $icon-s;
+    @if (type-of($size) == 'number') {
+        @if ($size < 12) {
+            @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
+                @if ($transform) {
+                    transform: scale($size / $icon-s) $transform;
+                } @else {
+                    transform: scale($size / $icon-s);
+                }
+                @if ($marginLeft) {
+                    margin-left: $marginLeft - ($icon-s - $size) / 2;
+                } @else {
+                    margin-left: -($icon-s - $size) / 2;
+                }
+                @if ($marginRight) {
+                    margin-right: $marginRight - ($icon-s - $size) / 2;
+                } @else {
+                    margin-right: -($icon-s - $size) / 2;
+                }
+
+                &:before {
+                    width: $icon-s;
+                    font-size: $icon-s;
+                }
             }
         }
     }

diff --git a/src/icon/index.jsx b/src/icon/index.jsx
@@ -17,7 +17,7 @@ class Icon extends Component {
         /**
          * 指定图标大小
          */
-        size: PropTypes.oneOf(['xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl']),
+        size: PropTypes.oneOf(['xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl', 'inherit']),
         className: PropTypes.string
     };
 

diff --git a/src/icon/main.scss b/src/icon/main.scss
@@ -117,4 +117,8 @@
     &xxxl {
         @include icon-size($icon-xxxl);
     }
+
+    &inherit {
+        @include icon-size(inherit);
+    }
 }