lucide-animated：把 Lucide Icon 變成會動的 React 元件

前言

一般 icon 放進按鈕後就不會再動。如果想替搜尋、下載或通知加一點回饋，常常還得自己拆 SVG 路徑、補 keyframes，再調整動畫時間。

我剛試了 lucide-animated。它把 Lucide icon 做成可直接加入 React 專案的動態元件，滑鼠移過去就會播放動畫，不用自己從零處理 SVG。

先直接玩玩看

下面放了幾個 icon。電腦可以把滑鼠移到卡片上，手機則直接點一下；搜尋結果會留在原本的網格內，不會另外彈出一個容易超出螢幕的面板。

這個預覽是我挑選 repo 內常見的 Lucide 圖示後，另外做成適合文章嵌入的版本。完整圖示與原本的 Motion 動畫，還是以官方網站為準。

怎麼裝進 React 專案？

lucide-animated 不是要你把整包 icon 裝進專案，而是透過 shadcn CLI 一次加入需要的元件。以 activity 為例：

bash

npx shadcn@latest add "https://lucide-animated.com/r/activity.json"

執行後會在專案內產生 components/icons/activity.tsx，第一次安裝時也會補上 motion 相依套件。接著直接匯入：

tsx

import { ActivityIcon } from '@/components/icons/activity'

export function Status() {
  return <ActivityIcon className="size-6" aria-label="Activity" />
}

元件預設會在 hover 時播放動畫，也保留一般 SVG props，可以改尺寸、顏色、事件與無障礙標籤。它目前主要給 React 18 以上專案使用；官方 README 另外列出 Vue、Svelte、Angular 與 Flutter 的社群移植版本。

也可以直接交給 Agent

這個專案不只準備了給人看的 icon 頁面，也提供 skill.md、llms.txt 和 MCP 端點。Agent 可以先搜尋 icon 名稱，再取得單一元件的安裝指令與使用範例。

最簡單的做法，是把 Skill 網址和需求一起交給有網頁、終端機權限的 Agent：

text

請閱讀 https://lucide-animated.com/skill.md，
替這個 React 專案找一個適合「下載完成」的動態 icon，
安裝後放進下載按鈕，並保留 aria-label。

如果使用的 Agent 支援遠端 MCP，也能接上 https://lucide-animated.com/mcp。官方提供搜尋、列出圖示與取得單一 icon 資訊的工具，比把整個 icon 清單塞進提示詞乾淨很多。

適合用在哪裡？

我不會把每個 icon 都換成動畫。導覽列一次動十幾個圖示，反而很容易分散注意力。下載完成、複製成功、展開選單或通知這種有明確操作回饋的位置，才是它最適合出現的地方。

這套做法的好處是一次只拿需要的元件，程式碼也會直接留在自己的專案裡。想改動畫時間或觸發方式，不必等套件作者增加 API；但相對地，之後若官方更新某個 icon，也要自己決定要不要重新同步。