图标

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>
  )
}