---
name: "lucide-react-icon-optimization"
description: "Integrate crisp, consistent vector icons with tree-shaking and dynamic icon sizing."
metadata:
  author: "Lucide"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "import lucide react icons"
  - "tree shake lucide icons"
  - "dynamic lucide icon component"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Lucide React Tree-Shakable Icon Architecture

Implements Lucide React: importing individual icon modules to guarantee zero bundle bloat, configuring default strokeWidth and size, color inheritance with currentColor, and building dynamic icon renderers.

## When to Invoke
Invoke this skill whenever you need to:
- import lucide react icons
- tree shake lucide icons
- dynamic lucide icon component

## Execution SOP & Rules
1. Always import named icons from 'lucide-react': import { Check, Sparkles } from 'lucide-react'.
2. Never do wildcard imports like import * as Icons from 'lucide-react' to avoid pulling all 1,400+ SVGs.
3. Pass standard SVG props: <Sparkles className='h-4 w-4 text-emerald-600' strokeWidth={1.75} />.
4. Verify bundle size impact using @next/bundle-analyzer.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.