The Complete Production SOP: How to Deploy and Run Lucide React Tree-Shakable Icon Architecture in Autonomous AI Agents

---
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. For dynamic lookup by string name, use lazy imports via 'lucide-react/dynamicIconImports' and dynamic/lazy wrappers.
5. Verify bundle size impact using build-time analyzer tools.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    optimizePackageImports: ['lucide-react'],
  },
};

export default nextConfig;

import React, { lazy, Suspense } from 'react';
import { LucideProps } from 'lucide-react';
import dynamicIconImports from 'lucide-react/dynamicIconImports';

export type IconName = keyof typeof dynamicIconImports;

interface DynamicIconProps extends Omit<LucideProps, 'ref'> {
  name: IconName;
  fallback?: React.ReactNode;
}

export const DynamicIcon = ({ name, fallback = <span className="inline-block h-4 w-4 animate-pulse bg-slate-200 rounded" />, ...props }: DynamicIconProps) => {
  const LucideIcon = lazy(dynamicIconImports[name]);

  return (
    <Suspense fallback={fallback}>
      <LucideIcon {...props} />
    </Suspense>
  );
};

{
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "paths": [{
          "name": "lucide-react",
          "importNames": ["*"],
          "message": "Wildcard imports from lucide-react prevent tree-shaking. Use named imports instead."
        }]
      }
    ]
  }
}