Skip to main content

LucideIcon

info

For a full list of available icons and their names, please visit Lucide Icons.

The LucideIcon component allows you to display SVG icons from the lucide-react-native library with customizable properties such as size, color, stroke width, and more.

Import​

import { LucideIcon } from "phaselis";

Usage​

import { LucideIcon } from "phaselis";

const Example = () => {
  return (
    <>
      <LucideIcon name="Search" size="md" />
      <LucideIcon name="Settings" width={50} height={50} />
    </>
  );
};

export default Example;

Props​

name​

SlotIconName

The name of the icon to be displayed. This should correspond to an icon from the lucide-react-native library.

<LucideIcon name="Heart" />

size​

ComponentSize Specifies the size of the icon.

<LucideIcon name="Home" size="lg" />

style​

any

Custom styles to apply to the icon.

<LucideIcon name="Star" style={{ color: "#144194" }} />

width​

number

The width of the icon in pixels.

<LucideIcon name="Bell" width={40} />

height​

number

The height of the icon in pixels.

<LucideIcon name="Clock" height={40} />

strokeWidth​

number

Specifies the stroke width of the icon lines.

<LucideIcon name="Check" strokeWidth={3} />

onClick​

() => void

Callback function triggered when the icon is pressed.

<LucideIcon name="ThumbsUp" onClick={() => alert("Icon clicked!")} />