Lucide Icon
@yamada-ui/lucide is a component that incorporates the Yamada UI style system into Lucide icons.
Import
pnpm add @yamada-ui/lucide
@yamada-ui/lucide is not included in @yamada-ui/react, so it needs to be installed separately.
Usage
import { Ghost } from "@yamada-ui/lucide"
Editable example
<Ghost />
Using icons from Lucide lab
To use icons from Lucide lab, use the Icon component.
import { Icon as LucideIcon } from "@yamada-ui/lucide"import { burger } from "@lucide/lab"
Editable example
<LucideIcon icon={burger} />
Lucide lab is a collection of experimental or pre-release icons that are not included in Lucide.
Creating a single generic component
It is also possible to create a single generic component, but it is not recommended.
const LucideIcon: FC<IconProps & { name: IconNames }> = ({ name, ...rest }) => {const Icon = icons[name]return <Icon {...rest} />}return <LucideIcon name="Ghost" />
In the example above, all ES modules are imported, so be careful when using it. Importing all icons can significantly increase the build size of your application and potentially degrade performance. This is particularly important when using bundlers such as webpack, Rollup, or Vite.
Edit this page on GitHub