Lucide icon renders at correct size on load, then shrinks (lucide-react size prop)

[bebagodfried]

Bug
Lucide icons imported via lucide-react and sized with the size prop briefly render at the correct size, then shrink shortly after mount.

Reproduction

import { Star } from 'lucide-react';

<Star size={36} />

Expected behavior
The icon should render and stay at 36px, with no visible resize after mount.

Actual behavior
lucide-react's size prop sets width/height as inline SVG attributes on render. Once ArchCSS's base stylesheet loads and applies its svg.lucide rule (driven by --lucide-size, default 1.5rem), that rule overrides the inline size attributes, causing the icon to shrink from 36px down to the default 24px shortly after first paint.

Suspected cause
ArchCSS's CSS rule for svg.lucide size wins over the inline width/height set by the size prop, instead of the inline prop taking precedence when explicitly set by the developer.

Environment

• Next.js (App Router)
• ArchCSS v3.0.0-beta.2, installed via pnpm
• lucide-react, sizing via size prop (no className)

Possible fix
Remove the blanket size rule on svg.lucide (or drop the !important). Only apply width/height: var(--lucide-size) on elements that carry an ArchCSS .icon-* class. Icons rendered via lucide-react without an .icon-* class should be left untouched by ArchCSS's base styles, so the size/width/height prop set by the developer is respected as-is.

[bebagodfried]

Workaround

Forcing width/height via inline style overrides ArchCSS's CSS rule (inline styles win over stylesheet rules regardless of !important scope on class-based selectors, since style attribute specificity is higher than any non-!important CSS rule):

<CheckCircle size={96} style={{ width: 96, height: 96, minWidth: 96 }} />

or simply:

<CheckCircle size={96} style={{ width: 96, height: 96 }} />

This prevents the post-mount shrink since the inline style attribute takes precedence over ArchCSS's svg.lucide CSS rule, unlike the size prop alone (which only sets width/height as plain SVG attributes, not style, and therefore loses to CSS).