AntdIcon：如何使用Ant Design的Icon組件

一、Ant Design的Icon組件是什麼

Ant Design是一個領先的React UI組件庫，提供了大量的組件和設計準則。其中包括Icon組件，用於顯示矢量圖標。每個圖標由一個符號和一組基於路徑的數據表示，可以輕鬆地使用CSS樣式進行自定義。 AntdIcon是Ant Design的圖標組件庫，提供了700多個圖標，極大地簡化了圖標的使用和展示。

二、如何安裝AntdIcon

通過npm或yarn安裝：

npm install @ant-design/icons
yarn add @ant-design/icons

其中包括以下四種使用方式:

• 直接引入
• 按需引入
• 動態引入
• 自定義圖標

三、直接引入方式

直接引入需要在頁面引入antd.css文件和對應的Ant Design圖標.css文件，如下代碼：

<!-- 在head中添加Ant Design css -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/antd/3.26.20/antd.min.css"/>

<!-- 在head中添加自己需要的icon css，此處以github為例 -->
<link rel="stylesheet" href="https://i.icomoon.io/public/91d2599b65/github/style.css"/>

<!-- 在需要展示Github圖標的地方添加i標籤 -->
<i className="icon-github"></i>

引入antd.css文件時，可以使用CDN來減小頁面對主機的請求次數，在下面的代碼中使用的是BootCDN提供的Ant Design資源。此外，這種方法存在的一個明顯缺點是無法按需使用組件，所以這種方法不太推薦使用。

四、按需引入方式

按需引入需要用到babel-plugin-import插件，首先安裝依賴：

npm install babel-plugin-import -D
yarn add babel-plugin-import -D

修改webpack.config.js中的babel-loader配置，如下代碼：

{
   test: /\.js$/,
   exclude: /node_modules/,
   use: {
      loader: "babel-loader",
      options: {
         presets: ["@babel/preset-react"],
         plugins: [
            [
               "import",
               {
                  libraryName: "antd",
                  libraryDirectory: "es",
                  style: "css"
               }
            ]
         ]
      }
   }
}

在項目入口文件中引入需要使用的組件，例如：

import { Icon } from 'antd';

function App() {
   return (
      <div className="App">
         <Icon type="smile" />
      </div>
   );
}

export default App;

這種方式可以根據需要只引入用到的Icon組件，減少了代碼量，加快了頁面載入速度，建議在實際項目中使用。

五、動態引入方式

如果想要在完成頁面渲染之後動態載入需要的組件，可以使用React.lazy，如下代碼：

import React, { Suspense } from 'react';
const Icon = React.lazy(() => import('@ant-design/icons').then(({ SmileOutlined }) => ({ default: SmileOutlined })));

function App() {
   return (
      <div className="App">
         <Suspense fallback={<div>Loading...</div>}>
            <Icon />
         </Suspense>
      </div>
   );
}

export default App;

可以看到，在這種方式下，Icon組件是在頁面已經載入完畢之後才會被載入，避免了首次載入過慢的情況。

六、自定義圖標方式

開發者也可以自定義自己的圖標，需要先將SVG文件轉換為React組件。

import { ReactComponent as GithubIcon } from '../assets/github.svg';

function App() {
   return (
      <div className="App">
         <GithubIcon />
      </div>
   );
}

export default App;

需要注意的是，將SVG轉換為React組件需要使用類似於svg-react-loader這樣的loader。以上是關於AntdIcon如何使用的詳細介紹，從組件的概念和作用開始，一直到一些具體的使用方式和技巧。希望對開發者們有所幫助。