XIcon — Self-contained SVG Icons

A zero-dependency SVG icon component. All icons come from the categorized folders under XIcon/icon/, collected automatically at build time — no manual registration. Single color by default (currentColor); when color is omitted the icon inherits the parent text color.

Live Demo

<XIcon name="code" />
<XIcon name="send" color="#22c55e" />
<XIcon name="like" color="#ef4444" />
<XIcon name="loading" spin />

Props

Prop	Type	Default	Description
name	string	— (required)	Icon name (globally unique)
color	string	''	Icon color; inherits the parent color when omitted
size	number | string	''	Numbers are treated as px; strings are used as-is (e.g. "2em"); follows the parent font size when omitted
spin	boolean	false	Whether to spin (commonly used for loading)

Usage Notes

• Icon names are globally unique, even across categories.
• XIcon/icon.js collects icons automatically via import.meta.glob('./icon/**/*.svg', { query: '?raw' }). Copy the directory together with its icon/ subfolder.
• New icons: drop a .svg into XIcon/icon/<category>/ (the file name becomes the icon name). SVG fill is automatically normalized to currentColor, so no changes to registration code are needed.