@genarou/blazir-icons 1.3.4 → 1.4.0

package/README.md

@@ -2,8 +2,9 @@
 
 A high-performance Svelte 5 icon library with smart caching, lazy loading, presets, variants, and a declarative effects system.
 
-- **163 icons** — original SVG artwork
+- **199 icons** — original SVG artwork
 - **Svelte 5 runes** — `$props`, `$derived`, `$effect`
+- **Three usage patterns** — dynamic `<Icon>`, lazy `<IconLazy>`, or direct named imports
 - **Smart LRU cache** — referential stability, zero re-renders on stable props
 - **Lazy loading** — per-icon code splitting via `import()`
 - **Vite plugin** — automatic tree shaking, only used icons in the bundle
@@ -79,6 +80,9 @@ pnpm add @genarou/blazir-icons
   ├─ lazy=false (default)   → iconRegistry[name]        (static import, zero latency)
   └─ lazy=true              → getLoadedIcon() || loadIcon() (dynamic import + skeleton)
 
+<IconLazy>                  ← Zero-registry lazy wrapper
+  └─ loadIcon(name)         → dynamic import(), no static registry dependency
+
 <IconBase>                  ← SVG renderer
   ├─ receives merged IconProps
   ├─ applies mode (solid / outline / duotone)
@@ -109,6 +113,21 @@ When `lazy={true}`:
 3. If not found, sets `isLoading = true` (shows a skeleton placeholder), calls `loadIcon(name)` (dynamic `import()`), and updates the component when the module resolves.
 4. If the `name` prop changes before the load completes, the stale result is discarded — no race conditions.
 
+### `<IconLazy>` — zero-registry alternative
+
+`<IconLazy>` is a standalone component that never imports the static registry. It only depends on `lazy-registry.ts` (pure dynamic imports), so bundlers can fully eliminate it from the initial chunk if you only use lazy icons.
+
+```svelte
+<script>
+  import { IconLazy } from '@genarou/blazir-icons'
+</script>
+
+<!-- No static registry in the bundle at all -->
+<IconLazy name="settings" size={24} color="var(--primary)" />
+```
+
+Use `<IconLazy>` instead of `<Icon lazy>` when you want to guarantee zero static registry dependency at the module level.
+
 ### Actions diff bridge
 
 The `actions` prop accepts an array of `[actionFn, params]` tuples. On update, the bridge diffs the new array against the previous one:
@@ -138,7 +157,7 @@ Every icon has a direct string name and a typed alias via `bzIcons`.
 
 ### Available `bzIcons` aliases
 
-All 163 icons organized by category. Use the alias for TypeScript autocomplete or the name as a plain string.
+All 199 icons organized by category.
 
 #### Navigation & Layout
 
@@ -149,7 +168,6 @@ All 163 icons organized by category. Use the alias for TypeScript autocomplete o
 | `bzIcons.DashboardOutline` | `dashboardOutline` |
 | `bzIcons.Settings` | `settings` |
 | `bzIcons.Search` | `search` |
-| `bzIcons.Filter` | `filter` |
 | `bzIcons.Menu` | `menu` |
 | `bzIcons.Close` | `close` |
 | `bzIcons.Plus` | `plus` |
@@ -163,7 +181,10 @@ All 163 icons organized by category. Use the alias for TypeScript autocomplete o
 | Alias | `name` |
 |---|---|
 | `bzIcons.User` | `user` |
+| `bzIcons.UserShield` | `userShield` |
 | `bzIcons.UserTie` | `userTie` |
+| `bzIcons.UserPlus` | `userPlus` |
+| `bzIcons.UserMinus` | `userMinus` |
 | `bzIcons.Team` | `team` |
 | `bzIcons.Group` | `group` |
 | `bzIcons.Supervisor` | `supervisor` |
@@ -252,6 +273,7 @@ All 163 icons organized by category. Use the alias for TypeScript autocomplete o
 | `bzIcons.Save` | `save` |
 | `bzIcons.Form` | `form` |
 | `bzIcons.Print` | `print` |
+| `bzIcons.Work` | `work` |
 
 #### Calendar & Time
 
@@ -267,10 +289,15 @@ All 163 icons organized by category. Use the alias for TypeScript autocomplete o
 | Alias | `name` |
 |---|---|
 | `bzIcons.ArrowRight` | `arrowRight` |
+| `bzIcons.ArrowLeft` | `arrowLeft` |
 | `bzIcons.ArrowUp` | `arrowUp` |
+| `bzIcons.ArrowDown` | `arrowDown` |
 | `bzIcons.ArrowUpDown` | `arrowUpDown` |
 | `bzIcons.ArrowLeftAnimated` | `arrowLeftAnimated` |
 | `bzIcons.ChevronDown` | `chevronDown` |
+| `bzIcons.ChevronUp` | `chevronUp` |
+| `bzIcons.ChevronLeft` | `chevronLeft` |
+| `bzIcons.ChevronRight` | `chevronRight` |
 | `bzIcons.ChevronUpDown` | `chevronUpDown` |
 
 #### File Actions
@@ -284,6 +311,14 @@ All 163 icons organized by category. Use the alias for TypeScript autocomplete o
 | `bzIcons.UploadProgress` | `uploadProgress` |
 | `bzIcons.FileUploadAnimated` | `fileUploadAnimated` |
 | `bzIcons.Refresh` | `refresh` |
+| `bzIcons.SyncPhoto` | `syncPhoto` |
+| `bzIcons.Process` | `process` |
+| `bzIcons.Play` | `play` |
+| `bzIcons.Pause` | `pause` |
+| `bzIcons.Historic` | `historic` |
+| `bzIcons.HardDrive` | `hardDrive` |
+| `bzIcons.Connect` | `connect` |
+| `bzIcons.Archive` | `archive` |
 
 #### States & Feedback
 
@@ -335,6 +370,8 @@ All 163 icons organized by category. Use the alias for TypeScript autocomplete o
 | `bzIcons.Scan` | `scan` |
 | `bzIcons.Cart` | `cart` |
 | `bzIcons.Cards` | `cards` |
+| `bzIcons.Percentage` | `percentage` |
+| `bzIcons.Gift` | `gift` |
 
 #### Logistics & Transport
 
@@ -355,20 +392,53 @@ All 163 icons organized by category. Use the alias for TypeScript autocomplete o
 | `bzIcons.EditOutline` | `editOutline` |
 | `bzIcons.Trash` | `trash` |
 | `bzIcons.TrashOutline` | `trashOutline` |
+| `bzIcons.Filter` | `filter` |
+| `bzIcons.FilterOutline` | `filterOutline` |
 | `bzIcons.Tags` | `tags` |
 | `bzIcons.Tools` | `tools` |
 | `bzIcons.ObjectGroup` | `objectGroup` |
 | `bzIcons.Project` | `project` |
 
+#### Common Actions
+
+| Alias | `name` |
+|---|---|
+| `bzIcons.ExternalLink` | `externalLink` |
+| `bzIcons.Maximize` | `maximize` |
+| `bzIcons.Minimize` | `minimize` |
+| `bzIcons.Undo` | `undo` |
+| `bzIcons.Redo` | `redo` |
+| `bzIcons.Grip` | `grip` |
+
+#### Layout
+
+| Alias | `name` |
+|---|---|
+| `bzIcons.Grid` | `grid` |
+| `bzIcons.Layers` | `layers` |
+| `bzIcons.Sliders` | `sliders` |
+
 #### Media & Devices
 
 | Alias | `name` |
 |---|---|
 | `bzIcons.Camera` | `camera` |
 | `bzIcons.Desktop` | `desktop` |
+| `bzIcons.Video` | `video` |
+| `bzIcons.Microphone` | `microphone` |
+| `bzIcons.MicOff` | `micOff` |
+| `bzIcons.Volume` | `volume` |
+| `bzIcons.VolumeOff` | `volumeOff` |
 | `bzIcons.Wifi` | `wifi` |
 | `bzIcons.Power` | `power` |
 
+#### Dev
+
+| Alias | `name` |
+|---|---|
+| `bzIcons.Code` | `code` |
+| `bzIcons.Terminal` | `terminal` |
+
 #### Cloud
 
 | Alias | `name` |
@@ -376,6 +446,7 @@ All 163 icons organized by category. Use the alias for TypeScript autocomplete o
 | `bzIcons.CloudAlert` | `cloudAlert` |
 | `bzIcons.CloudCheck` | `cloudCheck` |
 | `bzIcons.CloudDownload` | `cloudDownload` |
+| `bzIcons.CloudUpload` | `cloudUpload` |
 
 #### Other
 
@@ -385,13 +456,14 @@ All 163 icons organized by category. Use the alias for TypeScript autocomplete o
 | `bzIcons.Earth` | `earth` |
 | `bzIcons.Globe` | `globe` |
 | `bzIcons.LightHub` | `lightHub` |
+| `bzIcons.Qr` | `qr` |
 | `bzIcons.Sync` | `sync` |
 
 ---
 
 ## Props Reference
 
-All props are optional. Every prop can be passed to `<Icon>` or `<IconBase>`.
+All props are optional. Every prop can be passed to `<Icon>`, `<IconLazy>`, or `<IconBase>`.
 
 ### Visual
 
@@ -411,7 +483,7 @@ All props are optional. Every prop can be passed to `<Icon>` or `<IconBase>`.
 | `class` | `string` | — | CSS class on the wrapper element |
 | `className` | `string` | — | Alias for `class` |
 | `style` | `string` | — | Inline style on the wrapper element |
-| `attrs` | `Record<string, any>` | — | Arbitrary extra attributes forwarded to the `<svg>` element (excluding `width`/`height`) |
+| `attrs` | `Record<string, any>` | — | Arbitrary extra attributes forwarded to the `<svg>` element |
 
 ### Size Tokens
 
@@ -438,12 +510,12 @@ All props are optional. Every prop can be passed to `<Icon>` or `<IconBase>`.
 | `rotate` | `number \| string` | — | Rotation in degrees or CSS string |
 | `flipH` | `boolean` | `false` | Flip horizontally |
 | `flipV` | `boolean` | `false` | Flip vertically |
-| `nonScalingStroke` | `boolean` | `false` | Keep stroke width fixed regardless of transform (`vector-effect="non-scaling-stroke"`) |
+| `nonScalingStroke` | `boolean` | `false` | Keep stroke width fixed regardless of transform |
 
 ```svelte
-<Icon name="arrow" rotate={45} />
-<Icon name="arrow" flipH />
-<Icon name="arrow" rotate={90} flipV />
+<Icon name="arrowRight" rotate={45} />
+<Icon name="arrowRight" flipH />
+<Icon name="arrowRight" rotate={90} flipV />
 ```
 
 ### Animations
@@ -461,14 +533,11 @@ All props are optional. Every prop can be passed to `<Icon>` or `<IconBase>`.
 | `animationEasing` | `string` | — | CSS easing function |
 
 ```svelte
-<Icon name="loadingDots" spin />
-<Icon name="loadingDots" spin={800} />
+<Icon name="spinnerDots" spin />
+<Icon name="spinnerDots" spin={800} />
 <Icon name="bell" bounce animationDuration={600} />
 <Icon name="heart" heartbeat animationDelay="200ms" />
 <Icon name="star" pulse animationEasing="ease-in-out" />
-
-<!-- Combine multiple animations -->
-<Icon name="loadingRegular" spin pulse />
 ```
 
 ### Entry Transitions
@@ -485,7 +554,7 @@ All props are optional. Every prop can be passed to `<Icon>` or `<IconBase>`.
 
 ```svelte
 <!-- Animated menu toggle -->
-<Icon name="hamburguer" morphTo={isOpen ? 'close' : 'menu'} />
+<Icon name="menu" morphTo={isOpen ? 'close' : 'menu'} />
 
 <!-- Animated accordion chevron -->
 <Icon name="chevronDown" chevronOpen={isExpanded} />
@@ -501,10 +570,10 @@ All props are optional. Every prop can be passed to `<Icon>` or `<IconBase>`.
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `hoverColor` | `string` | — | Color applied on hover |
-| `activeColor` | `string` | — | Color applied on press/active. Priority: `activeColor` > `hoverColor` > `color` |
-| `disabled` | `boolean` | `false` | Reduces opacity to 0.4 and disables all pointer events and hover effects |
-| `loading` | `boolean` | `false` | Replaces the icon with a spinning circle until `false`. Reuses internal spin keyframe — zero extra weight |
-| `tooltip` | `string` | — | Native browser tooltip. Shorthand for `effects={{ tooltip: "..." }}` |
+| `activeColor` | `string` | — | Color applied on press/active |
+| `disabled` | `boolean` | `false` | Reduces opacity to 0.4 and disables all pointer events |
+| `loading` | `boolean` | `false` | Replaces the icon with a spinning circle until `false` |
+| `tooltip` | `string` | — | Native browser tooltip |
 | `hoverSpeed` | `"instant" \| "fast" \| "normal" \| "slow" \| "sluggish"` | `"normal"` | Semantic preset for hover transition speed |
 | `transitionMs` | `number \| string` | `250` | Exact hover transition duration. Overrides `hoverSpeed` |
 | `transitionEasing` | `string` | `"ease"` | CSS easing for hover transition |
@@ -521,24 +590,11 @@ All props are optional. Every prop can be passed to `<Icon>` or `<IconBase>`.
 | `"sluggish"` | 600ms |
 
 ```svelte
-<!-- Hover color with speed preset -->
 <Icon name="edit" hoverColor="var(--primary)" hoverSpeed="fast" />
-
-<!-- Active/press color -->
 <Icon name="heart" hoverColor="#f97316" activeColor="#dc2626" />
-
-<!-- Disabled state -->
 <Icon name="send" disabled />
-<Icon name="save" disabled={!isFormValid} />
-
-<!-- Loading state — auto spinner, no wrapper needed -->
 <Icon name="save" loading={isSaving} />
-
-<!-- Tooltip -->
-<Icon name="info" tooltip="More information" />
-
-<!-- Custom easing -->
-<Icon name="bell" hoverColor="var(--primary)" transitionMs={350} transitionEasing="ease-in-out" />
+<Icon name="circleInfo" tooltip="More information" />
 
 <!-- Trigger icon hover when parent row is hovered -->
 <script>
@@ -552,8 +608,6 @@ All props are optional. Every prop can be passed to `<Icon>` or `<IconBase>`.
 
 ### Compact Mode
 
-Reduces visual weight of solid icons at small sizes by adjusting opacity.
-
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `compact` | `"off" \| "auto" \| "outline" \| "duotone"` | `"off"` | Compact rendering mode |
@@ -562,10 +616,7 @@ Reduces visual weight of solid icons at small sizes by adjusting opacity.
 | `compactStrokeWidth` | `number \| string` | — | Stroke width in compact mode |
 
 ```svelte
-<!-- Auto: switches to outline style below 20px -->
 <Icon name="user" compact="auto" size={16} />
-
-<!-- Always compact duotone -->
 <Icon name="folder" compact="duotone" compactFillOpacity={0.2} />
 ```
 
@@ -574,33 +625,28 @@ Reduces visual weight of solid icons at small sizes by adjusting opacity.
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `ariaLabel` | `string` | Icon name | `aria-label` on the SVG |
-| `title` | `string` | — | SVG `<title>` element (tooltip on hover in browsers) |
-| `titleId` | `string` | — | `id` for the `<title>` element (for `aria-labelledby`) |
-| `decorative` | `boolean` | `false` | Sets `aria-hidden="true"` — use when icon is purely decorative |
+| `title` | `string` | — | SVG `<title>` element |
+| `titleId` | `string` | — | `id` for the `<title>` element |
+| `decorative` | `boolean` | `false` | Sets `aria-hidden="true"` |
 | `testId` | `string` | — | `data-testid` attribute |
 
 ```svelte
-<!-- Decorative icon next to a labeled button -->
 <button>
   <Icon name="download" decorative />
   Download
 </button>
 
-<!-- Standalone meaningful icon -->
 <Icon name="check" ariaLabel="Task completed" />
-
-<!-- With visible tooltip -->
-<Icon name="info" title="More information" ariaLabel="More information" />
 ```
 
 ### Lazy Loading Prop
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `lazy` | `boolean` | `false` | Load the icon as a separate dynamic import, enabling per-icon code splitting. Shows a skeleton placeholder while loading. |
+| `lazy` | `boolean` | `false` | Load the icon via dynamic import, enabling per-icon code splitting |
 
 ```svelte
-<!-- Eager (default) — bundled with registry -->
+<!-- Eager (default) -->
 <Icon name="check" />
 
 <!-- Lazy — separate chunk, skeleton while loading -->
@@ -611,7 +657,7 @@ Reduces visual weight of solid icons at small sizes by adjusting opacity.
 
 ## Presets
 
-Presets apply a predefined set of props in one shot. Define colors, sizes, and behaviors using your CSS design tokens.
+Presets apply a predefined set of props in one shot.
 
 ```svelte
 <Icon name="check" preset="success" />
@@ -638,10 +684,7 @@ Presets apply a predefined set of props in one shot. Define colors, sizes, and b
 Props passed directly always override preset values.
 
 ```svelte
-<!-- preset sets size=24, but size={32} wins -->
 <Icon name="check" preset="nav" size={32} />
-
-<!-- preset + variant combination -->
 <Icon name="trash" preset="button" variant="danger" />
 ```
 
@@ -649,11 +692,7 @@ Props passed directly always override preset values.
 
 ## Variants
 
-Variants apply a color scheme without touching size or behavior. Combine with presets for full control.
-
-```svelte
-<Icon name="check" preset="button" variant="success" />
-```
+Variants apply a color scheme without touching size or behavior.
 
 | Variant | Color token |
 |---|---|
@@ -673,17 +712,18 @@ Variants apply a color scheme without touching size or behavior. Combine with pr
 By default icons load eagerly (zero latency, no skeletons). Add `lazy` to defer loading and enable per-icon code splitting.
 
 ```svelte
-<!-- Eager (default) — same bundle chunk as always -->
+<!-- Eager (default) -->
 <Icon name="check" />
 
 <!-- Lazy — loaded on first render, skeleton shown while loading -->
 <Icon name="check" lazy />
+
+<!-- Zero-registry component — no static imports whatsoever -->
+<IconLazy name="check" />
 ```
 
 ### Manual preload
 
-Preload a set of icons before they are needed (e.g. on route anticipation):
-
 ```ts
 import { preloadIcons } from '@genarou/blazir-icons'
 
@@ -696,11 +736,8 @@ preloadIcons(['check', 'home', 'settings', 'user'])
 ```ts
 import { loadIcon, getLoadedIcon } from '@genarou/blazir-icons'
 
-// Async load + cache
-const Check = await loadIcon('check')
-
-// Synchronous lookup (returns null if not yet loaded)
-const Cached = getLoadedIcon('check')
+const Check = await loadIcon('check')       // async load + cache
+const Cached = getLoadedIcon('check')       // sync lookup (null if not yet loaded)
 ```
 
 ---
@@ -710,20 +747,9 @@ const Cached = getLoadedIcon('check')
 Declarative interactive effects applied via the `effects` prop. All effects respect `prefers-reduced-motion`.
 
 ```svelte
-<Icon
-  name="settings"
-  effects={{ spinOnHover: true, cursor: 'pointer' }}
-/>
-
-<Icon
-  name="trash"
-  effects={{ wiggleOnHover: true, elasticOnClick: true }}
-/>
-
-<Icon
-  name="heart"
-  effects={{ heartbeatOnHover: true, hoverScale: 1.15 }}
-/>
+<Icon name="settings" effects={{ spinOnHover: true, cursor: 'pointer' }} />
+<Icon name="trash"    effects={{ wiggleOnHover: true, elasticOnClick: true }} />
+<Icon name="heart"    effects={{ heartbeatOnHover: true, hoverScale: 1.15 }} />
 ```
 
 ### `IconEffectOptions`
@@ -733,12 +759,10 @@ Declarative interactive effects applied via the `effects` prop. All effects resp
 | `spinOnHover` | `boolean` | Spin on mouse enter |
 | `bounceOnHover` | `boolean` | Bounce on mouse enter |
 | `wiggleOnHover` | `boolean` | Wiggle on mouse enter |
+| `heartbeatOnHover` | `boolean` | Heartbeat on hover |
+| `heartbeatOnActive` | `boolean` | Heartbeat on mousedown |
 | `slideOnHover` | `"up" \| "down" \| "left" \| "right"` | Slide translate on hover |
-| `morphOnHover` | `"play" \| "pause" \| "menu" \| "close" \| "arrow" \| "check"` | Morph shape on hover |
 | `elasticOnClick` | `boolean` | Elastic scale pop on click |
-| `heartbeatOnActive` | `boolean` | Heartbeat on mousedown |
-| `heartbeatOnHover` | `boolean` | Heartbeat on hover |
-| `pulse` | `boolean` | Continuous pulse |
 | `hoverScale` | `number` | Scale factor on hover (`1.1` = 110%) |
 | `pressScale` | `number` | Scale factor on press |
 | `rotateOnHover` | `number` | Degrees to rotate on hover |
@@ -747,12 +771,9 @@ Declarative interactive effects applied via the `effects` prop. All effects resp
 | `cursor` | `string` | CSS cursor on hover |
 | `tooltip` | `string` | Native title tooltip |
 | `focusRing` | `boolean` | Show visible focus ring |
-| `kbFocusAttr` | `string` | Data attribute set on keyboard focus |
 
 ### Using `iconEffects` as a Svelte action
 
-For advanced cases where you need to apply effects to a custom element:
-
 ```svelte
 <script>
   import { iconEffects } from '@genarou/blazir-icons'
@@ -778,38 +799,24 @@ Pass Svelte actions to the icon wrapper via the `actions` prop. Actions are diff
   let opts = $state({ text: 'Save file' })
 </script>
 
-<Icon
-  name="save"
-  actions={[[tooltip, opts], [lazyLoad]]}
-/>
+<Icon name="save" actions={[[tooltip, opts], [lazyLoad]]} />
 ```
 
-Each entry in `actions` is a tuple `[actionFn, params?]`. When `params` change, `update()` is called. When the action function itself changes, the action is destroyed and recreated.
+Each entry is a tuple `[actionFn, params?]`. When `params` change, `update()` is called. When the action function itself changes, the action is destroyed and recreated.
 
 ---
 
 ## IconBadge
 
-`IconBadge` wraps any icon with an absolute-positioned notification badge. Zero weight unless imported.
-
 ```svelte
 <script>
   import { IconBadge } from '@genarou/blazir-icons'
 </script>
 
-<!-- Dot (boolean) -->
-<IconBadge name="bell" badge />
-
-<!-- Count -->
-<IconBadge name="bell" badge={5} />
-
-<!-- Text -->
-<IconBadge name="chat" badge="!" />
-
-<!-- Custom color and size -->
+<IconBadge name="bell" badge />                                    <!-- dot -->
+<IconBadge name="bell" badge={5} />                                <!-- count -->
+<IconBadge name="chat" badge="!" />                                <!-- text -->
 <IconBadge name="bell" badge={12} badgeColor="#f59e0b" badgeSize={18} />
-
-<!-- Position (default: top-right) -->
 <IconBadge name="bell" badge={3} badgePosition="top-left" />
 ```
 
@@ -821,16 +828,17 @@ Accepts all `Icon` props plus:
 |---|---|---|---|
 | `badge` | `boolean \| number \| string` | — | `true` = dot · number/string = label |
 | `badgeColor` | `string` | `#ef4444` | Badge background color |
+| `badgeTextColor` | `string` | `#ffffff` | Badge text color |
 | `badgeSize` | `number` | `8` (dot) / `16` (label) | Badge diameter in px |
 | `badgePosition` | `"top-right" \| "top-left" \| "bottom-right" \| "bottom-left"` | `"top-right"` | Corner placement |
 
-> `badge={false}` or omitting `badge` renders the icon directly without any wrapper element — no DOM overhead.
+> `badge={false}` or omitting `badge` renders the icon directly without any wrapper — no DOM overhead.
 
 ---
 
 ## CustomIcon
 
-Render any custom SVG string using the same `IconBase` engine — all effects, transitions, hover colors, animations and a11y props work out of the box.
+Render any custom SVG string using the same `IconBase` engine.
 
 ```svelte
 <script>
@@ -839,39 +847,22 @@ Render any custom SVG string using the same `IconBase` engine — all effects, t
   const logoSvg = `<path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/>`
 </script>
 
-<!-- Same API as Icon — all props supported -->
 <CustomIcon svgContent={logoSvg} size={32} color="var(--primary)" />
-
-<!-- With hover and effects -->
-<CustomIcon
-  svgContent={logoSvg}
-  hoverColor="#6366f1"
-  hoverSpeed="fast"
-  effects={{ hoverScale: 1.1 }}
-/>
-
-<!-- With animations -->
-<CustomIcon svgContent={logoSvg} spin pulse />
-
-<!-- Custom viewBox for non-24x24 SVGs -->
+<CustomIcon svgContent={logoSvg} hoverColor="#6366f1" effects={{ hoverScale: 1.1 }} />
 <CustomIcon svgContent={logoSvg} viewBox="0 0 48 48" size={48} />
 ```
 
-### `CustomIcon` props
-
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `svgContent` | `string` | **required** | Raw SVG inner markup (paths, circles, etc. — not the `<svg>` tag itself) |
+| `svgContent` | `string` | **required** | Raw SVG inner markup (not the `<svg>` tag itself) |
 | `viewBox` | `string` | `"0 0 24 24"` | ViewBox for the SVG container |
-| + all `IconProps` | | | Every prop from the standard `Icon` is supported |
-
-> The content is rendered via `{@html}`. For static `svgContent` (most common case) the cost is a single `innerHTML` assignment at mount — identical to any other icon. All `IconBase` effects run on the containing `<g>` layer.
+| + all `IconProps` | | | Every prop from `Icon` is supported |
 
 ---
 
 ## Vite Plugin (Tree Shaking)
 
-Without the plugin, all 152 icons are included in your bundle. With the plugin, only the icons you statically reference are bundled.
+The plugin scans your source files at build time, detects static `name="..."` values, and generates a minimal registry containing only the icons you use.
 
 ```ts
 // vite.config.ts
@@ -886,17 +877,12 @@ export default {
 }
 ```
 
-The plugin scans your source files at build time, detects static `name="..."` values, and generates a minimal registry.
-
 ```svelte
-<!-- Detected statically → only Check.svelte in bundle -->
+<!-- Detected → only Check.svelte bundled -->
 <Icon name="check" />
-
-<!-- Also detected statically -->
 <Icon name={"home"} />
 
-<!-- Dynamic → cannot detect → falls back to full registry (safe) -->
-<Icon name={bzIcons.User} />
+<!-- Dynamic → falls back to full registry (safe) -->
 <Icon name={someVariable} />
 ```
 
@@ -904,10 +890,7 @@ The plugin scans your source files at build time, detects static `name="..."` va
 
 ```ts
 blazirIconsPlugin({
-  // Root directory to scan. Default: Vite's config.root
   root: './src',
-
-  // File extensions to include in scan
   extensions: ['.svelte', '.ts', '.tsx', '.js', '.jsx'],
 })
 ```
@@ -916,50 +899,51 @@ blazirIconsPlugin({
 
 | Scenario | Bundle (gzip) |
 |---|---|
-| No plugin — all 163 icons | ~11 KB |
+| No plugin — all 199 icons | ~12 KB |
 | With plugin — 10 static icons | ~1–2 KB |
-| With plugin — dynamic names detected | ~11 KB (safe fallback) |
+| Direct named imports — zero plugin needed | only imported icons |
 
 ---
 
 ## Direct Icon Imports
 
-Import a single icon component directly for maximum tree shaking without the plugin:
+Three ways to import icons with full tree shaking, no plugin required:
 
 ```ts
-import Check    from '@genarou/blazir-icons/icons/Check'
-import Home     from '@genarou/blazir-icons/icons/Home'
-import Settings from '@genarou/blazir-icons/icons/Settings'
+// 1. Named exports from the main package
+import { CircleCheck, Home, Settings } from '@genarou/blazir-icons'
+
+// 2. Named exports from the /components barrel (identical result, explicit path)
+import { CircleCheck, Home } from '@genarou/blazir-icons/components'
+
+// 3. Individual file (maximum isolation)
+import CircleCheck from '@genarou/blazir-icons/icons/CircleCheck'
+import Home        from '@genarou/blazir-icons/icons/Home'
 ```
 
-Use them as regular Svelte components. All `IconProps` are supported, but presets and variants are not applied automatically.
+Use them as regular Svelte components. All `IconProps` are supported.
 
 ```svelte
-<Check size={20} color="var(--success-color)" />
-<Home  size={24} hoverColor="var(--primary)" />
+<CircleCheck size={20} color="var(--success-color)" />
+<Home size={24} hoverColor="var(--primary)" />
 ```
 
 ---
 
 ## TypeScript
 
-Full type coverage on all props and icon names.
-
 ```ts
 import type { IconProps, IconName, IconMode } from '@genarou/blazir-icons'
 import type { IconEffectOptions }             from '@genarou/blazir-icons'
 import type { BzIconKey }                     from '@genarou/blazir-icons'
 
-// Typed icon name
 const icon: IconName = 'check'
 
-// Typed effect options
 const effects: IconEffectOptions = {
   spinOnHover: true,
   hoverScale: 1.1,
 }
 
-// Typed bzIcons alias
 const key: BzIconKey = 'Check'
 ```
 
@@ -968,7 +952,6 @@ const key: BzIconKey = 'Check'
 ```ts
 import { iconRegistry } from '@genarou/blazir-icons'
 
-// Autocomplete on all registry keys
 type MyIconName = keyof typeof iconRegistry
 ```
 
@@ -976,8 +959,6 @@ type MyIconName = keyof typeof iconRegistry
 
 ## CSS Custom Properties
 
-Customize animations globally via CSS variables.
-
 | Variable | Default | Description |
 |---|---|---|
 | `--bz-icon-bounce-amt` | `18%` | Bounce height |
@@ -985,10 +966,8 @@ Customize animations globally via CSS variables.
 | `--bz-icon-ring` | primary | Focus ring color |
 | `--bz-icon-wiggle-angle` | `3deg` | Wiggle rotation amount |
 | `--bz-icon-slide-distance` | `8px` | Slide effect distance |
-| `--bz-icon-size` | set by component | Icon size (set automatically) |
 
 ```css
-/* globals.css */
 :root {
   --bz-icon-bounce-amt: 24%;
   --bz-icon-wiggle-angle: 5deg;
@@ -1000,17 +979,17 @@ Customize animations globally via CSS variables.
 ## Accessibility Guide
 
 ```svelte
-<!-- Decorative icon — hidden from screen readers -->
+<!-- Decorative icon next to a labeled button -->
 <button>
   <Icon name="trash" decorative />
   Delete item
 </button>
 
-<!-- Meaningful standalone icon -->
+<!-- Standalone meaningful icon -->
 <Icon name="warning" ariaLabel="Warning: unsaved changes" />
 
 <!-- With visible tooltip -->
-<Icon name="info" title="More information" ariaLabel="More information" />
+<Icon name="circleInfo" title="More information" ariaLabel="More information" />
 
 <!-- In a labeled group -->
 <div aria-label="Status">
@@ -1028,19 +1007,11 @@ Customize animations globally via CSS variables.
 ```svelte
 <script>
   import { Icon } from '@genarou/blazir-icons'
-  export let active = false
-  export let label = ''
-  export let icon = 'home'
+  let { active = false, label = '', icon = 'home' } = $props()
 </script>
 
 <a class="nav-item" class:active>
-  <Icon
-    name={icon}
-    preset="sidebar"
-    color={active ? 'var(--primary)' : undefined}
-    effects={{ hoverScale: 1.08 }}
-    decorative
-  />
+  <Icon name={icon} preset="sidebar" color={active ? 'var(--primary)' : undefined} effects={{ hoverScale: 1.08 }} decorative />
   <span>{label}</span>
 </a>
 ```
@@ -1059,7 +1030,6 @@ Customize animations globally via CSS variables.
   }
 </script>
 
-<!-- The icon swaps to a spinner automatically while saving -->
 <button onclick={submit} disabled={saving}>
   <Icon name="save" loading={saving} decorative />
   {saving ? 'Saving...' : 'Save'}
@@ -1090,16 +1060,8 @@ Customize animations globally via CSS variables.
 
 <div class="input-wrapper">
   <input type={visible ? 'text' : 'password'} />
-  <button
-    onclick={() => visible = !visible}
-    aria-label={visible ? 'Hide password' : 'Show password'}
-  >
-    <Icon
-      name={visible ? 'eyeOff' : 'eye'}
-      preset="muted"
-      effects={{ hoverScale: 1.1, cursor: 'pointer' }}
-      decorative
-    />
+  <button onclick={() => visible = !visible} aria-label={visible ? 'Hide password' : 'Show password'}>
+    <Icon name={visible ? 'eyeOff' : 'eye'} preset="muted" effects={{ hoverScale: 1.1, cursor: 'pointer' }} decorative />
   </button>
 </div>
 ```
@@ -1113,13 +1075,7 @@ Customize animations globally via CSS variables.
 </script>
 
 <button aria-label="Notifications ({count} unread)">
-  <IconBadge
-    name="bell"
-    size={22}
-    badge={count > 0 ? count : false}
-    effects={{ wiggleOnHover: true, cursor: 'pointer' }}
-    decorative
-  />
+  <IconBadge name="bell" size={22} badge={count > 0 ? count : false} effects={{ wiggleOnHover: true, cursor: 'pointer' }} decorative />
 </button>
 ```
 
@@ -1132,14 +1088,11 @@ Customize animations globally via CSS variables.
   const ctx = $derived({ hovered })
 </script>
 
-<tr
-  onmouseenter={() => hovered = true}
-  onmouseleave={() => hovered = false}
->
+<tr onmouseenter={() => hovered = true} onmouseleave={() => hovered = false}>
   <td>{row.name}</td>
   <td class="actions">
-    <Icon name="edit"  parentHoverContext={ctx} hoverColor="var(--primary)"      preset="button" ariaLabel="Edit row" />
-    <Icon name="trash" parentHoverContext={ctx} hoverColor="var(--danger-color)"  preset="button" ariaLabel="Delete row" />
+    <Icon name="edit"  parentHoverContext={ctx} hoverColor="var(--primary)"     preset="button" ariaLabel="Edit row" />
+    <Icon name="trash" parentHoverContext={ctx} hoverColor="var(--danger-color)" preset="button" ariaLabel="Delete row" />
   </td>
 </tr>
 ```
@@ -1157,19 +1110,13 @@ Customize animations globally via CSS variables.
     success: 'circleCheck',
     warning: 'warning',
     error:   'error',
-    loading: 'loadingDots',
+    loading: 'spinnerDots',
   }
 
-  export let status: Status = 'loading'
+  let { status }: { status: Status } = $props()
 </script>
 
-<Icon
-  name={iconMap[status]}
-  variant={status === 'loading' ? 'muted' : status}
-  spin={status === 'loading'}
-  size={18}
-  ariaLabel="Status: {status}"
-/>
+<Icon name={iconMap[status]} variant={status === 'loading' ? 'muted' : status} spin={status === 'loading'} size={18} ariaLabel="Status: {status}" />
 ```
 
 ### Preloading icons on route change (SvelteKit)
@@ -1179,7 +1126,6 @@ Customize animations globally via CSS variables.
 import { preloadIcons } from '@genarou/blazir-icons'
 
 export const load = async () => {
-  // Icons are prefetched in background while page data loads
   preloadIcons(['chart', 'table', 'user', 'settings', 'logout', 'bell'])
   return {}
 }
@@ -1190,17 +1136,11 @@ export const load = async () => {
 ```svelte
 <script>
   import { iconEffects } from '@genarou/blazir-icons'
-  import Check from '@genarou/blazir-icons/icons/Check'
+  import { CircleCheck } from '@genarou/blazir-icons'
 </script>
 
-<div
-  class="status-chip"
-  use:iconEffects={{ pulse: true, hoverScale: 1.05, cursor: 'pointer' }}
->
-  <Check size={14} color="var(--success-color)" decorative />
+<div class="status-chip" use:iconEffects={{ pulse: true, hoverScale: 1.05, cursor: 'pointer' }}>
+  <CircleCheck size={14} color="var(--success-color)" decorative />
   Active
 </div>
 ```
-
----
-