前言

在介面設計中，圖示（Icons）是最常見也最直覺的元素，不僅能提升辨識度，還能讓操作更有效率。

Animate UI 提供的 Icons 元件，不只是簡單的圖示，還能搭配動畫效果，就讓我們一起打造出既美觀又實用的介面吧🥳

好的圖示應該可以提高使用者的操作效率，不易讓人發生操作失誤

From Wikipedia

Icons

1. 前往 Animate UI Icons 挑選想要增加的 Icon，目前有 204 個 icons

2. 今天我想要使用 Wheel 這個 Icon，點擊它會跳出如下圖

   

   將 Sheet 上方的 Installation 複製

   npx shadcn@latest add @animate-ui/icons-loader-pinwheel
   

3. Import 元件並將元件放在想要的位置上

   import { LoaderPinwheel } from "@/components/animate-ui/icons/loader-pinwheel";
   

   這邊有個 Small Tips

   前一步安裝後輸出的 Icons 安裝位置複製下來，在 @/ 後貼上去 Import 就不用自己找檔案路徑在哪裡了

   

   在 Sheet 上的 Usage 中複製貼到想要呈現的位置

   <LoaderPinwheel animateOnHover />
   

   

4. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

   在 <LoaderPinwheel animateOnHover /> 後有個 animateOnHover 指的是只有在滑鼠游標移到圖示上方才動作，有其他功能如下：

另外 Icon 動作的方式也有幾種預設的方式，以 Wheel 這個 Icon 有三個 default、path、path-loop

不同效果的呈現結果如下：

程式碼如下：

```tsx
<div className="flex gap-[24px] flex-wrap items-center justify-center">
    <AnimateIcon animateOnView animation={"default"}>
        <LoaderPinwheel />
    </AnimateIcon>
    <h3>Default</h3>
</div>

<div className="flex gap-[24px] flex-wrap items-center justify-center">
    <AnimateIcon animateOnView animation={"path"}>
        <LoaderPinwheel />
    </AnimateIcon>
    <h3>Path</h3>
</div>

<div className="flex gap-[24px] flex-wrap items-center justify-center">
    <AnimateIcon animateOnView animation={"path-loop"}>
        <LoaderPinwheel />
    </AnimateIcon>
    <h3>Path Loop</h3>
</div>
```

另外還有其他參數如下：

小結

Icons 圖示在介面中雖然常被視為小細節，但實際上能大幅影響使用者體驗。透過 Animate UI 的 Icons 元件，不只能維持清晰的識別性，還能加入細緻的動態效果，讓你的設計更具吸引力與互動感。

Reference

• Animate UI Docs