run ant's codemod tool

web/src/App.tsx

@@ -1,4 +1,11 @@
-import { Icon, Layout, Menu, Tag } from "antd";
+import {
+  ApiOutlined,
+  DollarOutlined,
+  GithubOutlined,
+  TeamOutlined,
+  TwitterOutlined
+} from "@ant-design/icons";
+import { Layout, Menu, Tag } from "antd";
 import React from "react";
 import {
   BrowserRouter as Router,
@@ -93,7 +100,7 @@ const Twitter = () => (
       target="_blank"
       rel="noopener noreferrer"
     >
-      <Icon type="twitter" /> Twitter
+      <TwitterOutlined /> Twitter
     </a>
   </Tag>
 );
@@ -106,7 +113,7 @@ const Community = () => (
       target="_blank"
       rel="noopener noreferrer"
     >
-      <Icon type="team" /> Community
+      <TeamOutlined /> Community
     </a>
   </Tag>
 );
@@ -119,7 +126,7 @@ const GitHub = () => (
       target="_blank"
       rel="noopener noreferrer"
     >
-      <Icon type="github" /> GitHub
+      <GithubOutlined /> GitHub
     </a>
   </Tag>
 );
@@ -132,7 +139,7 @@ const Api = () => (
       target="_blank"
       rel="noopener noreferrer"
     >
-      <Icon type="api" /> API
+      <ApiOutlined /> API
     </a>
   </Tag>
 );
@@ -145,7 +152,7 @@ const Donate = () => (
       target="_blank"
       rel="noopener noreferrer"
     >
-      <Icon type="dollar" /> Donate
+      <DollarOutlined /> Donate
     </a>
   </Tag>
 );

web/src/components/LinkButton.tsx

@@ -1,3 +1,4 @@
+import { Icon as LegacyIcon } from "@ant-design/compatible";
 import { Button } from "antd";
 import { ButtonType } from "antd/lib/button";
 import React from "react";
@@ -18,7 +19,7 @@ export const LinkButton = (props: Props) =>
       type={props.type || "default"}
       block
       style={{ borderLeftColor: "rgb(217, 217, 217)" }} //HACK: override buggy style in antd
-      icon={props.icon}
+      icon={<LegacyIcon type={props.icon} />}
       target="_blank"
       rel="noopener noreferrer"
     >

web/src/components/ListInfoButton.tsx

@@ -1,4 +1,5 @@
-import { Button, Icon } from "antd";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { Button } from "antd";
 import React from "react";
 import { RouteComponentProps } from "react-router-dom";
 import slugify from "slugify";
@@ -21,7 +22,7 @@ export const ListInfoButton = (props: RouteComponentProps & Props) => {
           : props.history.push(listPath)
       }
     >
-      <Icon type="info-circle" />
+      <InfoCircleOutlined />
     </Button>
   );
 };

web/src/components/SubscribeButtons.tsx

@@ -1,3 +1,4 @@
+import { ImportOutlined } from "@ant-design/icons";
 import { Button } from "antd";
 import { ButtonType } from "antd/lib/button";
 import React from "react";
@@ -52,7 +53,7 @@ const SubscribeButton = (props: SubscribeButtonProps) => {
     <Button
       disabled={buttonProps.disabled}
       block
-      icon="import"
+      icon={<ImportOutlined />}
       type={buttonProps.type}
       href={buttonProps.href}
       title={buttonProps.title}

web/src/components/maintainers/Maintainers.tsx

@@ -1,6 +1,8 @@
 import "./maintainers.css";
 
-import { Card, Icon } from "antd";
+import { HomeOutlined, MailOutlined, TwitterOutlined } from "@ant-design/icons";
+
+import { Card } from "antd";
 import React from "react";
 
 import { Maintainer } from "../../interfaces/Maintainer";
@@ -33,7 +35,7 @@ const MaintainerComponent = (props: MaintainerComponentProps) => {
         target="_blank"
         rel="noopener noreferrer"
       >
-        <Icon type="home" key="home" />
+        <HomeOutlined key="home" />
       </a>
     );
   }
@@ -45,7 +47,7 @@ const MaintainerComponent = (props: MaintainerComponentProps) => {
         target="_blank"
         rel="noopener noreferrer"
       >
-        <Icon type="mail" key="mail" />
+        <MailOutlined key="mail" />
       </a>
     );
   }
@@ -57,7 +59,7 @@ const MaintainerComponent = (props: MaintainerComponentProps) => {
         target="_blank"
         rel="noopener noreferrer"
       >
-        <Icon type="twitter" key="twitter" />
+        <TwitterOutlined key="twitter" />
       </a>
     );
   }

web/src/hooks/useSearchColumnFilter.tsx

@@ -1,4 +1,5 @@
-import { Button, Icon, Input } from "antd";
+import { SearchOutlined } from "@ant-design/icons";
+import { Button, Input } from "antd";
 import { FilterDropdownProps } from "antd/lib/table";
 import React, { useEffect, useState } from "react";
 
@@ -45,7 +46,7 @@ export const useSearchColumnFilter = <T extends {}>(dataIndex: string) => {
           <Button
             type="primary"
             onClick={() => handleSearch(confirm)}
-            icon="search"
+            icon={<SearchOutlined />}
             size="small"
             style={{ width: 90, marginRight: 8 }}
           >
@@ -61,10 +62,7 @@ export const useSearchColumnFilter = <T extends {}>(dataIndex: string) => {
         </div>
       ),
       filterIcon: filtered => (
-        <Icon
-          type="search"
-          style={{ color: filtered ? "#1890ff" : undefined }}
-        />
+        <SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
       ),
       onFilter: (value, record) => {
         const searchValue = (record as any)[dataIndex];