or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

custom-icons.mddynamic-icons.mdindex.mdstatic-icons.md
tile.json

tessl/npm-lucide-react

A Lucide icon library package for React applications providing comprehensive SVG icons as tree-shakable React components.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/lucide-react@0.542.x

To install, run

npx @tessl/cli install tessl/npm-lucide-react@0.542.0

index.mddocs/

Lucide React

Lucide React is a comprehensive icon library package for React applications that provides SVG icons as tree-shakable React components. It offers a complete implementation of the Lucide icon collection with customizable styling, sizing, and color properties, designed for maximum performance and flexibility with zero dependencies beyond React.

Package Information

  • Package Name: lucide-react
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install lucide-react

Core Imports

import { Camera, Grid, Pen } from "lucide-react";
import { Icon } from "lucide-react";
import { createLucideIcon } from "lucide-react";
import { icons } from "lucide-react";

For CommonJS:

const { Camera, Grid, Pen, Icon } = require("lucide-react");

Dynamic imports:

import { DynamicIcon, iconNames } from "lucide-react/dynamic";

Basic Usage

import { Camera, Grid, Pen } from "lucide-react";

// Basic icon usage
const App = () => {
  return (
    <div>
      <Camera />
      <Grid size={32} color="blue" />
      <Pen strokeWidth={3} className="my-icon" />
    </div>
  );
};

Architecture

Lucide React is built around several key components:

  • Icon Components: Individual icon components (e.g., Camera, Grid) created from SVG data
  • Base Icon Component: Core Icon component that renders SVG from icon node data
  • Dynamic Loading: DynamicIcon component for runtime icon selection by name
  • Icon Factory: createLucideIcon function for creating new icon components
  • Type System: Complete TypeScript definitions with LucideProps and IconNode types
  • Tree-shaking: ES modules structure ensuring only imported icons are bundled

Capabilities

Static Icon Components

Individual React components for each Lucide icon, optimized for tree-shaking and static imports. Perfect for when you know which icons you need at build time.

type LucideIcon = ForwardRefExoticComponent<
  Omit<LucideProps, 'ref'> & RefAttributes<SVGSVGElement>
>;

interface LucideProps extends ElementAttributes {
  size?: string | number;
  absoluteStrokeWidth?: boolean;
}

Static Icons

Dynamic Icon Loading

Runtime icon loading system for displaying icons based on string names. Useful for CMS-driven applications or when icon selection is determined at runtime.

function DynamicIcon(props: DynamicIconProps): JSX.Element;

interface DynamicIconProps extends LucideProps {
  name: IconName;
  fallback?: () => JSX.Element | null;
}

type IconName = keyof typeof dynamicIconImports;
const iconNames: Array<IconName>;
const dynamicIconImports: Record<string, () => Promise<DynamicIconModule>>;

interface DynamicIconModule {
  default: LucideIcon;
  __iconNode: IconNode;
}

Dynamic Icons

Custom Icon Creation

System for creating custom icon components from icon data, supporting Lucide Lab icons and custom SVG definitions.

function Icon(props: IconComponentProps): JSX.Element;
function createLucideIcon(iconName: string, iconNode: IconNode): LucideIcon;

interface IconComponentProps extends LucideProps {
  iconNode: IconNode;
}

type IconNode = [elementName: SVGElementType, attrs: Record<string, string>][];

Custom Icons

Types

import type { SVGProps, ForwardRefExoticComponent, RefAttributes } from 'react';
type SVGElementType =
  | 'circle'
  | 'ellipse' 
  | 'g'
  | 'line'
  | 'path'
  | 'polygon'
  | 'polyline'
  | 'rect';

type IconNode = [elementName: SVGElementType, attrs: Record<string, string>][];

type SVGAttributes = Partial<SVGProps<SVGSVGElement>>;
type ElementAttributes = RefAttributes<SVGSVGElement> & SVGAttributes;

interface LucideProps extends ElementAttributes {
  size?: string | number;
  absoluteStrokeWidth?: boolean;
}

type LucideIcon = ForwardRefExoticComponent<
  Omit<LucideProps, 'ref'> & RefAttributes<SVGSVGElement>
>;