feat: Icon size support inherit (#378)

content/basic/icon/index-en-US.md

@@ -54,7 +54,7 @@ import { IconHome, IconEmoji, IconSpin } from '@douyinfe/semi-icons';
 You can change the `font-size` to change the icon size
 >
 
-The Icon component encapsulates the size attribute, which makes it easier to define the icon size. It supports `extra-small` (8x8), `small` (12x12), `default` (16x16), `large` (20x20), `extra-large `(24x24).
+The Icon component encapsulates the size attribute, which makes it easier to define the icon size. It supports `extra-small` (8x8), `small` (12x12), `default` (16x16), `large` (20x20), `extra-large `(24x24), When size is specified as `inherit`, the icon size inherits the current context font size.
 
 
 ```jsx live=true
@@ -156,7 +156,7 @@ import StarIcon from './star.svg';
 | onMouseMove | Callback event of moving the mouse >=v1.21 | (e: Event) => void | None |
 | onMouseUp | Callback event when the mouse button is raised >=v1.21 | (e: Event) => void | None |
 | rotate | degree of rotation | number | |
-| size | Size, supports `extra-small`, `small`, `default`, `large`, `extra-large` | string | `default` |
+| size | Size, supports `inherit`, `extra-small`, `small`, `default`, `large`, `extra-large` | string | `default` |
 | spin | spin animation | boolean | |
 | style | Icon style | CSSProperties | None |
 | svg | Icon content | ReactNode | None |

content/basic/icon/index.md

@@ -53,7 +53,7 @@ import { IconHome, IconEmoji, IconSpin } from '@douyinfe/semi-icons';
 可以改变`font-size`来更改图标大小
 >
 
-Icon组件封装了size属性，可以更方便地定义图标尺寸，支持 `extra-small` (8x8)，`small` (12x12)， `default` (16x16)， `large` (20x20)， `extra-large` (24x24)。
+Icon组件封装了size属性，可以更方便地定义图标尺寸，支持 `extra-small` (8x8)，`small` (12x12)， `default` (16x16)， `large` (20x20)， `extra-large` (24x24)，当size指定为`inherit`时，图标大小继承当前上下文字体大小
 
 
 ```jsx live=true
@@ -155,7 +155,7 @@ import StarIcon from './star.svg';
 | onMouseMove | 移动鼠标的回调事件 >=v1.21 | (e: Event) => void | 无    |
 | onMouseUp | 鼠标按钮抬起的回调事件 >=v1.21 | (e: Event) => void | 无    |
 | rotate | 旋转度数 | number |   |
-| size | 尺寸，支持`extra-small`，`small`， `default`， `large`， `extra-large` | string | `default`  |
+| size | 尺寸，支持`inherit`，`extra-small`，`small`， `default`， `large`， `extra-large` | string | `default`  |
 | spin | 旋转动画 | boolean |   |
 | style | 图标样式 | CSSProperties | 无    |
 | svg | 图标内容 | ReactNode | 无    |

packages/semi-icons/src/components/Icon.tsx

@@ -3,7 +3,7 @@ import { BASE_CLASS_PREFIX } from '../env';
 import cls from 'classnames';
 import '../styles/icons.scss';
 
-export type IconSize = 'extra-small' | 'small' | 'default' | 'large' | 'extra-large';
+export type IconSize = 'inherit' | 'extra-small' | 'small' | 'default' | 'large' | 'extra-large';
 
 export interface IconProps extends DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
     svg: ReactNode;

src/components/IconList/index.scss

@@ -55,8 +55,8 @@
 
     .semi-icons-item-name {
         padding: 8px 16px 0 16px;
-        white-space: normal;
-        word-break: keep-all;
+        white-space: pre-wrap;
+        word-break: break-word;
         text-align: center;
     }