
網路上的免費圖示集有很多,但是會動的動態圖示相對來說就少了一點,如果你對於這類的動畫圖有興趣,可以參考「Pqoqubbw icons」,這是一個開放原始碼專案(MIT 授權),收錄約 160 個圖示圖案,特色是這些圖示都具有動態效果,只要將滑鼠游標移動上去就能看到非常精細且巧妙的動畫效果。
這個名為「製作精美的動畫圖示」(beautifully crafted animated icons)是基於 Motion 和 Lucide 所建構,每個圖示都提供對應的程式碼,包括 shadcn cli 指令和程式碼,這些圖示具有風格一致性、輕量化和流暢特性,可以輕鬆被整合到專案中,無論是應用程式、網站或是各種軟體都非常適合。
Pqoqubbw icons 使用 MIT 授權方式釋出,開發者可自由下載、修改或進行編輯,適用於個人或商業用途,這類動態圖示能提升操作上的體驗,讓介面更為流暢、滑順。
網站名稱:Pqoqubbw icons
網站鏈結:https://icons.pqoqubbw.dev/
使用教學
開啟 beautifully crafted animated icons 後會看到所有的圖示預覽,將游標移動上去後就會看到動畫效果。

網站在最上方會有一個指令的預覽,簡單來說就是以 npx(Node.js 的工具)指令搭配上 shadcn@latest(使用 shadcn 工具的最新版本),後方接上 JSON 格式的圖示資料鏈結。

帶入的指令、超連結和程式碼都可以直接點選下方按鈕進行複製、使用,除此之外,也能在 Vercel 的 v0(零配置部署)功能直接開啟,若有開發上的需求就研究一下吧!

值得一試的三個理由:
- 風格一致性:設計風格統一,適合各種專案應用
- 輕量化與流暢性:能提升使用者介面的滑順操作體驗
- 易於整合:支援應用程式、網站及軟體的嵌入