Automatically generate an SVG sprite containing only the icons you used in development

🧠 What This Library Does

This package gives you:

1. Full Lucide-React DX in development
   Easy Imports, Instant updates, hot-reloading, JSX props, no caching issues. Use Just like Lucid but import the icon from @react-zero-ui/icon-sprite instead of lucide-react.

2. Zero-runtime SVG sprite usage in production
   Replaces every icon component with a <use href="/icons.svg#id" /> element at build time.

3. Tree-shaking via static analysis
   Icons are only included in the final sprite if your app actually uses them.

🙏 Custom icon support

Just drop SVGs into app/zero-ui-icons/, and use the <CustomIcon/> component. set the name prop to the name of the icon file want to use.

Tip

📁/public/zero-ui-icons/
  └── dog.svg 

import { CustomIcon } from "@react-zero-ui/icon-sprite";
//❗The name MUST match the name of the icon file - .svg extension is not needed.
<CustomIcon name="dog" size={24} />