feat: Feature tag component icon prop support

components/tag/__tests__/__snapshots__/demo.test.js.snap

@@ -480,6 +480,123 @@ exports[`renders ./components/tag/demo/hot-tags.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/tag/demo/icon.md correctly 1`] = `
+<div>
+  <span
+    class="ant-tag ant-tag-has-color"
+    style="background-color:#55acee"
+  >
+    <span
+      aria-label="twitter"
+      class="anticon anticon-twitter"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="twitter"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M928 254.3c-30.6 13.2-63.9 22.7-98.2 26.4a170.1 170.1 0 0075-94 336.64 336.64 0 01-108.2 41.2A170.1 170.1 0 00672 174c-94.5 0-170.5 76.6-170.5 170.6 0 13.2 1.6 26.4 4.2 39.1-141.5-7.4-267.7-75-351.6-178.5a169.32 169.32 0 00-23.2 86.1c0 59.2 30.1 111.4 76 142.1a172 172 0 01-77.1-21.7v2.1c0 82.9 58.6 151.6 136.7 167.4a180.6 180.6 0 01-44.9 5.8c-11.1 0-21.6-1.1-32.2-2.6C211 652 273.9 701.1 348.8 702.7c-58.6 45.9-132 72.9-211.7 72.9-14.3 0-27.5-.5-41.2-2.1C171.5 822 261.2 850 357.8 850 671.4 850 843 590.2 843 364.7c0-7.4 0-14.8-.5-22.2 33.2-24.3 62.3-54.4 85.5-88.2z"
+        />
+      </svg>
+    </span>
+    <span>
+      Twitter
+    </span>
+  </span>
+  <span
+    class="ant-tag ant-tag-has-color"
+    style="background-color:#cd201f"
+  >
+    <span
+      aria-label="youtube"
+      class="anticon anticon-youtube"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="youtube"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M960 509.2c0-2.2 0-4.7-.1-7.6-.1-8.1-.3-17.2-.5-26.9-.8-27.9-2.2-55.7-4.4-81.9-3-36.1-7.4-66.2-13.4-88.8a139.52 139.52 0 00-98.3-98.5c-28.3-7.6-83.7-12.3-161.7-15.2-37.1-1.4-76.8-2.3-116.5-2.8-13.9-.2-26.8-.3-38.4-.4h-29.4c-11.6.1-24.5.2-38.4.4-39.7.5-79.4 1.4-116.5 2.8-78 3-133.5 7.7-161.7 15.2A139.35 139.35 0 0082.4 304C76.3 326.6 72 356.7 69 392.8c-2.2 26.2-3.6 54-4.4 81.9-.3 9.7-.4 18.8-.5 26.9 0 2.9-.1 5.4-.1 7.6v5.6c0 2.2 0 4.7.1 7.6.1 8.1.3 17.2.5 26.9.8 27.9 2.2 55.7 4.4 81.9 3 36.1 7.4 66.2 13.4 88.8 12.8 47.9 50.4 85.7 98.3 98.5 28.2 7.6 83.7 12.3 161.7 15.2 37.1 1.4 76.8 2.3 116.5 2.8 13.9.2 26.8.3 38.4.4h29.4c11.6-.1 24.5-.2 38.4-.4 39.7-.5 79.4-1.4 116.5-2.8 78-3 133.5-7.7 161.7-15.2 47.9-12.8 85.5-50.5 98.3-98.5 6.1-22.6 10.4-52.7 13.4-88.8 2.2-26.2 3.6-54 4.4-81.9.3-9.7.4-18.8.5-26.9 0-2.9.1-5.4.1-7.6v-5.6zm-72 5.2c0 2.1 0 4.4-.1 7.1-.1 7.8-.3 16.4-.5 25.7-.7 26.6-2.1 53.2-4.2 77.9-2.7 32.2-6.5 58.6-11.2 76.3-6.2 23.1-24.4 41.4-47.4 47.5-21 5.6-73.9 10.1-145.8 12.8-36.4 1.4-75.6 2.3-114.7 2.8-13.7.2-26.4.3-37.8.3h-28.6l-37.8-.3c-39.1-.5-78.2-1.4-114.7-2.8-71.9-2.8-124.9-7.2-145.8-12.8-23-6.2-41.2-24.4-47.4-47.5-4.7-17.7-8.5-44.1-11.2-76.3-2.1-24.7-3.4-51.3-4.2-77.9-.3-9.3-.4-18-.5-25.7 0-2.7-.1-5.1-.1-7.1v-4.8c0-2.1 0-4.4.1-7.1.1-7.8.3-16.4.5-25.7.7-26.6 2.1-53.2 4.2-77.9 2.7-32.2 6.5-58.6 11.2-76.3 6.2-23.1 24.4-41.4 47.4-47.5 21-5.6 73.9-10.1 145.8-12.8 36.4-1.4 75.6-2.3 114.7-2.8 13.7-.2 26.4-.3 37.8-.3h28.6l37.8.3c39.1.5 78.2 1.4 114.7 2.8 71.9 2.8 124.9 7.2 145.8 12.8 23 6.2 41.2 24.4 47.4 47.5 4.7 17.7 8.5 44.1 11.2 76.3 2.1 24.7 3.4 51.3 4.2 77.9.3 9.3.4 18 .5 25.7 0 2.7.1 5.1.1 7.1v4.8zM423 646l232-135-232-133z"
+        />
+      </svg>
+    </span>
+    <span>
+      Youtube
+    </span>
+  </span>
+  <span
+    class="ant-tag ant-tag-has-color"
+    style="background-color:#3b5999"
+  >
+    <span
+      aria-label="facebook"
+      class="anticon anticon-facebook"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="facebook"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H663.9V602.2h104l15.6-120.7H663.9v-77.1c0-35 9.7-58.8 59.8-58.8h63.9v-108c-11.1-1.5-49-4.8-93.2-4.8-92.2 0-155.3 56.3-155.3 159.6v89H434.9v120.7h104.3V848H176V176h672v672z"
+        />
+      </svg>
+    </span>
+    <span>
+      Facebook
+    </span>
+  </span>
+  <span
+    class="ant-tag ant-tag-has-color"
+    style="background-color:#55acee"
+  >
+    <span
+      aria-label="linkedin"
+      class="anticon anticon-linkedin"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="linkedin"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M847.7 112H176.3c-35.5 0-64.3 28.8-64.3 64.3v671.4c0 35.5 28.8 64.3 64.3 64.3h671.4c35.5 0 64.3-28.8 64.3-64.3V176.3c0-35.5-28.8-64.3-64.3-64.3zm0 736c-447.8-.1-671.7-.2-671.7-.3.1-447.8.2-671.7.3-671.7 447.8.1 671.7.2 671.7.3-.1 447.8-.2 671.7-.3 671.7zM230.6 411.9h118.7v381.8H230.6zm59.4-52.2c37.9 0 68.8-30.8 68.8-68.8a68.8 68.8 0 10-137.6 0c-.1 38 30.7 68.8 68.8 68.8zm252.3 245.1c0-49.8 9.5-98 71.2-98 60.8 0 61.7 56.9 61.7 101.2v185.7h118.6V584.3c0-102.8-22.2-181.9-142.3-181.9-57.7 0-96.4 31.7-112.3 61.7h-1.6v-52.2H423.7v381.8h118.6V604.8z"
+        />
+      </svg>
+    </span>
+    <span>
+      LinkedIn
+    </span>
+  </span>
+</div>
+`;
+
 exports[`renders ./components/tag/demo/status.md correctly 1`] = `
 <div>
   <span

components/tag/demo/icon.md

@@ -0,0 +1,46 @@
+---
+order: 7
+title:
+  zh-CN: 图标按钮
+  en-US: Icon
+---
+
+## zh-CN
+
+当需要在 `Tag` 内嵌入 `Icon` 时，可以设置 `icon` 属性，或者直接在 `Tag` 内使用 `Icon` 组件。
+
+如果想控制 `Icon` 具体的位置，只能直接使用 `Icon` 组件，而非 `icon` 属性。
+
+## en-US
+
+`Tag` components can contain an `Icon`. This is done by setting the `icon` property or placing an `Icon` component within the `Tag`.
+
+If you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Tag` rather than using the `icon` property.
+
+```jsx
+import { Tag } from 'antd';
+import {
+  TwitterOutlined,
+  YoutubeOutlined,
+  FacebookOutlined,
+  LinkedinOutlined,
+} from '@ant-design/icons';
+
+ReactDOM.render(
+  <div>
+    <Tag icon={<TwitterOutlined />} color="#55acee">
+      Twitter
+    </Tag>
+    <Tag icon={<YoutubeOutlined />} color="#cd201f">
+      Youtube
+    </Tag>
+    <Tag icon={<FacebookOutlined />} color="#3b5999">
+      Facebook
+    </Tag>
+    <Tag icon={<LinkedinOutlined />} color="#55acee">
+      LinkedIn
+    </Tag>
+  </div>,
+  mountNode,
+);
+```

components/tag/index.en-US.md

@@ -23,6 +23,7 @@ Tag for categorizing or markup.
 | color | Color of the Tag | string | - |
 | onClose | Callback executed when tag is closed | (e) => void | - |
 | visible | Whether the Tag is closed or not | boolean | `true` |
+| icon | Set the icon of tag | ReactNode | - |  |
 
 ### Tag.CheckableTag
 

components/tag/index.tsx

@@ -7,6 +7,7 @@ import CheckableTag from './CheckableTag';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import { PresetColorTypes, PresetStatusColorTypes } from '../_util/colors';
 import Wave from '../_util/wave';
+import warning from '../_util/warning';
 
 export { CheckableTagProps } from './CheckableTag';
 
@@ -18,6 +19,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
   visible?: boolean;
   onClose?: Function;
   style?: React.CSSProperties;
+  icon?: React.ReactNode;
 }
 
 interface TagState {
@@ -106,24 +108,39 @@ class Tag extends React.Component<TagProps, TagState> {
   }
 
   renderTag = (configProps: ConfigConsumerProps) => {
-    const { children, ...otherProps } = this.props;
+    const { children, icon, ...otherProps } = this.props;
     const isNeedWave =
       'onClick' in otherProps || (children && (children as React.ReactElement<any>).type === 'a');
     const tagProps = omit(otherProps, ['onClose', 'color', 'visible', 'closable', 'prefixCls']);
+    warning(
+      !(typeof icon === 'string' && icon.length > 2),
+      'Tag',
+      `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
+    );
+    const iconNode = icon || null;
+    const kids = iconNode ? (
+      <>
+        {iconNode}
+        <span>{children}</span>
+      </>
+    ) : (
+      children
+    );
+
     return isNeedWave ? (
       <Wave>
         <span
           {...tagProps}
           className={this.getTagClassName(configProps)}
           style={this.getTagStyle()}
         >
-          {children}
+          {kids}
           {this.renderCloseIcon()}
         </span>
       </Wave>
     ) : (
       <span {...tagProps} className={this.getTagClassName(configProps)} style={this.getTagStyle()}>
-        {children}
+        {kids}
         {this.renderCloseIcon()}
       </span>
     );

components/tag/index.zh-CN.md

@@ -23,6 +23,7 @@ title: Tag
 | color | 标签色 | string | - |
 | onClose | 关闭时的回调 | (e) => void | - |
 | visible | 是否显示标签 | boolean | `true` |
+| icon | 设置图标 | ReactNode | - |  |
 
 ### Tag.CheckableTag
 

components/tag/style/index.less

@@ -119,6 +119,12 @@
   .make-status-color-classes('cyan', processing);
   .make-status-color-classes('red', error);
   .make-status-color-classes('orange', warning);
+
+  // To ensure that a space will be placed between character and `Icon`.
+  > .@{iconfont-css-prefix} + span,
+  > span + .@{iconfont-css-prefix} {
+    margin-left: 7px;
+  }
 }
 
 @import './rtl.less';