ReactJS - 圖示

Web 圖示是 Web 應用中重要的資源。開發人員在多個地方廣泛使用它來更好地視覺化上下文。例如，選單可以透過選單圖示輕鬆識別。Web 圖示有著悠久的歷史，在其漫長的歷史中有多種實現方式。

最初，圖示是標準尺寸的簡單影像，例如 24x24、32x32、48x48 等。後來，多個圖示被設計成單個影像，稱為圖示精靈，透過 CSS 定位屬性在網站中使用。然後，字型用於儲存多個圖示，並透過 CSS font-family 屬性使用。列表中最新的是 SVG 圖示。SVG 圖示以 SVG 格式設計和儲存，並在網站中使用 img 標籤或內聯 SVG 選項。

React 提供了一個基於社群的圖示庫，稱為 React 圖示，它提供了來自不同圖示庫的大量圖示集。讓我們在本節中學習如何在 React 中使用 React 圖示庫。

React 圖示 (React-icon) 庫

React 圖示庫從不同的供應商收集了數千個圖示，並將其包裝成 React 元件。開發人員可以使用它，就像包含一個 React 元件一樣簡單，以便在其專案中使用特定圖示。React 圖示提供的一些圖示集的簡短列表如下：

Bootstrap 圖示
Material Design 圖示
Font Awesome
Devicons
Boxicons
Ant Design 圖示
Github Octicons 圖示
VS Code 圖示

React 圖示提供了更多圖示集，我們可以在其網站上檢視所有圖示 (https://react-icons.github.io/react-icons/)

安裝 React 圖示庫

在 Web 應用中安裝 React 圖示庫就像使用 npm 安裝包一樣簡單，如下所示：

npm install react-icons --save

使用 React 圖示元件

庫中的每個圖示都將有一個相關的 React 元件。開發人員可以從 React 圖示庫網站找到他們需要的圖示元件，並在其 Web 應用中使用它。讓我們看看如何從 React 圖示庫的 Material Design 集中使用日曆圖示。來自 Material Design 的日曆圖示元件的名稱為 MdCalendarToday。Material Design 圖示集的包為 react-icons/md。開發人員需要匯入該包，並在相關位置使用該元件，如下所示：

import { MdCalendarToday } from "react-icons/md";
// ...
// ...
class SimpleIcon extends React.Component {
   render() {
      return <div>This icons <MdCalendarToday /> is calendar icon imported from react icon library</div>
   }
}

開發人員可以透過 CSS 更改圖示的顏色和大小。

class SimpleIcon extends React.Component {
   render() {
      return <div>This icons <MdCalendarToday style={{backgroundColor: "red", size: "24px"}}/>
      is calendar icon imported from react icon library</div>
   }
}

應用 React 圖示庫

讓我們透過開發一個應用來學習 forwardRef 的概念。

首先，建立一個新的 React 應用，並使用以下命令啟動它。

create-react-app myapp
cd myapp
npm start

接下來，安裝 React 圖示庫，如下所示：

npm install react-icons --save

接下來，開啟 App.css (src/App.css) 並刪除所有 CSS 類。

// remove the css

接下來，建立一個簡單的元件，SimpleIcon (src/Components/SimpleIcon.js)，如下所示：

import React from "react";
import { MdCalendarToday } from "react-icons/md";
class SimpleIcon extends React.Component {
   render() {
      return <div>This icons <MdCalendarToday style={{ color: "red", size: "24px" }} />
      is calendar icon imported from react icon library</div>
    }
}
export default SimpleIcon

這裡，

匯入了 react-icons/md 庫。
使用了 MdCalendarToday 元件來渲染日曆圖示。
使用內聯樣式更改圖示的顏色和大小。

接下來，開啟 App 元件 (src/App.js) 並使用 SimpleIcon 元件更新內容，如下所示：

import './App.css'
import React from 'react';
import SimpleIcon from './Components/SimpleIcon'
function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <SimpleIcon />
            </div>
         </div>
      </div>
   );
}
export default App;

這裡，

匯入了 SimpleIcon 元件。
使用了 SimpleIcon 元件來渲染日曆圖示。

最後，在瀏覽器中開啟應用。日曆圖示將按如下所示渲染：

總結

React 圖示庫透過從不同來源收集各種圖示並將其放在一個地方，並以簡單易用的方式提供它們，從而幫助開發人員。

列印頁面