React 與 icon 圖標工具

簡介

圖示(Icon)通常是指用來代表某個特定意義、功能或應用程序的簡單圖形符號。
它們可以幫助使用者更容易地識別和使用應用程序中的不同功能,也可以使用者界面更加美觀和易於使用。

介紹

圖示通常使用可縮放向量圖形(如 SVG)來實現,這種格式可以縮放和調整大小而不失真。
圖示可以使用簡單的幾何形狀和線條來表示,也可以使用更加複雜的設計和色彩來進一步傳達信息。

圖示在設計和開發中都是非常重要的元素,可以通過各種工具和庫來創建和使用。
常見的圖示庫包括 Font Awesome、Material Icons、Ionicons 等,
它們提供了大量的預先設計好的圖示,可以通過簡單的程式碼或樣式來使用。
此外,圖形介面軟體如 Adobe Illustrator 和 Sketch 等也可以用於創建自定義圖示。

Free Open Source icon

50+ Free Open Source Icon Libraries – Toools.design
https://www.toools.design/free-open-source-icon-libraries

Feather

https://feathericons.com/

Feather Icons React

You can use the default export and pass the ‘icon’ prop:

1
2
import FeatherIcon from 'feather-icons-react';
<FeatherIcon icon="close" />;

Or you can use the provided named export in place of the icon prop:

1
2
import { Close } from 'feather-icons-react';
<Close />;

Heroicons

https://heroicons.dev/?search=++&copyAs=name.

react-icons

https://react-icons.github.io/react-icons