Lucide Icon
@yamada-ui/lucideは、LucideのアイコンにYamada UIのスタイルシステムを取り入れたコンポーネントです。
インポート
pnpm add @yamada-ui/lucide
@yamada-ui/lucideは、@yamada-ui/reactに含まれていないため、別途インストールする必要があります。
使い方
import { GhostIcon } from "@yamada-ui/lucide"
編集可能な例
<GhostIcon />
Lucide labのアイコンを使用する
Lucide labのアイコンを使用する場合は、Iconを使用します。
import { LucideIcon } from "@yamada-ui/lucide"import { burger } from "@lucide/lab"
編集可能な例
<LucideIcon icon={burger} />
Lucide labは、Lucideに含まれていない実験的またはリリース前のアイコンのコレクションです。
1つの汎用コンポーネント
汎用コンポーネントを1つ作成することも可能ですが、オススメしません。
const LucideIcon: FC<IconProps & { name: IconNames }> = ({ name, ...rest }) => {const Icon = icons[name]return <Icon {...rest} />}return <LucideIcon name="GhostIcon" />
上記の例では、すべてのESモジュールをインポートしていますので、使用する際には注意が必要です。すべてのアイコンをインポートすると、アプリケーションのビルドサイズが大幅に増加し、パフォーマンスが悪化する可能性があります。これは、webpack、Rollup、Viteなどのバンドラを使用する際に特に重要です。
GitHubでこのページを編集する