圖示

lucide-react ／ Material Icons ／ Font Awesome

比較效果

用每個函式庫做了同樣的東西，動手試試看。

lucide-react

Material Icons

Font Awesome

比較程式碼

修改程式碼，右邊的預覽會跟著變化。

import { HouseIcon, SettingsIcon, SearchIcon, HeartIcon, BellIcon, UserIcon } from "lucide-react"
import { Tile, TileGrid } from "./Tile"

export default function App() {
  return (
    <TileGrid>
      <Tile label="首頁"><HouseIcon size={24} /></Tile>
      <Tile label="設定"><SettingsIcon size={24} /></Tile>
      <Tile label="搜尋"><SearchIcon size={24} /></Tile>
      <Tile label="收藏"><HeartIcon size={24} /></Tile>
      <Tile label="通知"><BellIcon size={24} /></Tile>
      <Tile label="使用者"><UserIcon size={24} /></Tile>
    </TileGrid>
  )
}