feat: update icon

components/icon/demo/basic.md

@@ -15,6 +15,7 @@ Use tag `<Icon />` to create an icon and set its type in the `type` prop. Specif
     <a-icon type="setting" theme="filled" />
     <a-icon type="smile" theme="outlined" />
     <a-icon type="sync" spin />
+    <a-icon type="smile" :rotate="180" />
     <a-icon type="loading" />
   </div>
 </template>

components/icon/index.en-US.md

@@ -6,6 +6,7 @@
 | style | Style properties of icon, like `fontSize` and `color` | CSSProperties | - |
 | theme | Theme of the ant design icon  | 'filled' \| 'outlined' \| 'twoTone' | 'outlined' |
 | spin | Rotate icon with animation | boolean | false |
+| rotate | Rotate degrees (added in 1.40.0, not working in IE9) | number | - |
 | component | The component used for the root node. This will override the **`type`** property. | ComponentType<CustomIconComponentProps\> | - |
 | twoToneColor | Only support the two-tone icon. Specific the primary color. | string (hex color) | - |
 

components/icon/index.js

@@ -11,6 +11,7 @@ import {
   alias,
 } from './utils';
 import warning from '../_util/warning';
+import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor';
 import { filterEmpty, getClass } from '../_util/props-util';
 
@@ -20,18 +21,7 @@ setTwoToneColor('#1890ff');
 const defaultTheme = 'outlined';
 let dangerousTheme;
 
-const Icon = {
-  functional: true,
-  name: 'AIcon',
-  props: {
-    type: PropTypes.string,
-    component: PropTypes.any,
-    viewBox: PropTypes.any,
-    spin: PropTypes.bool.def(false),
-    theme: PropTypes.oneOf(['filled', 'outlined', 'twoTone']),
-    twoToneColor: PropTypes.string,
-  },
-  render(h, context) {
+function renderIcon(h, locale, context) {
   const { props, slots, listeners, data } = context;
   const {
     // affect inner <svg>...</svg>
@@ -42,6 +32,8 @@ const Icon = {
     // other
     theme, // default to outlined
     twoToneColor,
+    rotate,
+    tabIndex,
   } = props;
   const slotsMap = slots();
   let children = filterEmpty(slotsMap.default);
@@ -61,6 +53,13 @@ const Icon = {
     [`anticon-spin`]: !!spin || type === 'loading',
   });
 
+  const svgStyle = rotate
+  ? {
+      msTransform: `rotate(${rotate}deg)`,
+      transform: `rotate(${rotate}deg)`,
+    }
+  : undefined;
+
   let innerNode;
 
   // component > children > type
@@ -68,6 +67,7 @@ const Icon = {
     const innerSvgProps = {
       attrs: {
         ...svgBaseProps,
+        style: svgStyle,
         viewBox,
       },
       class: svgClassString,
@@ -112,17 +112,55 @@ const Icon = {
       dangerousTheme || theme || defaultTheme,
     );
     innerNode = (
-        <VueIcon class={svgClassString} type={computedType} primaryColor={twoToneColor} />
+      <VueIcon
+        class={svgClassString}
+        type={computedType}
+        primaryColor={twoToneColor}
+        style={svgStyle}
+      />
     );
   }
+  let iconTabIndex = tabIndex;
+  if (iconTabIndex === undefined && ('click' in listeners)) {
+    iconTabIndex = -1;
+  }
+  const { attrs, ...restDataProps } = data;
   // functional component not support nativeOn，https://github.com/vuejs/vue/issues/7526
   const iProps = {
-      ...data,
+    ...restDataProps,
+    attrs: {
+      ...attrs,
+      'aria-label': type && `${locale.icon}: ${type}`,
+      tabIndex: iconTabIndex,
+    },
     on: { ...listeners, ...data.nativeOn },
     class: classString,
     staticClass: '',
   };
   return <i {...iProps}>{innerNode}</i>;
+}
+
+const Icon = {
+  functional: true,
+  name: 'AIcon',
+  props: {
+    tabIndex: PropTypes.number,
+    type: PropTypes.string,
+    component: PropTypes.any,
+    viewBox: PropTypes.any,
+    spin: PropTypes.bool.def(false),
+    rotate: PropTypes.number,
+    theme: PropTypes.oneOf(['filled', 'outlined', 'twoTone']),
+    twoToneColor: PropTypes.string,
+    role: PropTypes.string,
+  },
+  render(h, context) {
+    return (
+      <LocaleReceiver
+        componentName="Icon"
+        scopedSlots={{ default: (locale) => renderIcon(h, locale, context) }}
+      />
+    );
   },
 };
 

components/icon/index.zh-CN.md

@@ -7,6 +7,7 @@
 | style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - |
 | theme | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标 | 'filled' \| 'outlined' \| 'twoTone' | 'outlined' |
 | spin | 是否有旋转动画 | boolean | false |
+| rotate | 图标旋转角度（1.40.0 后新增，IE9 无效） | number | - |
 | component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 `Vue` 组件，**会使 `type` 属性失效** | ComponentType<CustomIconComponentProps\> | - |
 | twoToneColor | 仅适用双色图标。设置双色图标的主要颜色 | string (十六进制颜色) | - |
 

components/list/index.jsx

@@ -1,8 +1,6 @@
 import PropTypes from '../_util/vue-types';
 import classNames from 'classnames';
 import omit from 'omit.js';
-import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import defaultLocale from '../locale-provider/default';
 import { ConfigConsumerProps } from '../config-provider';
 
 import Spin from '../spin';