Found while burning the BARE_SPREAD_ON_SVG group of #5632 (PR #7564). Out of that card's scope — it is authored metadata, not a renderer defect — so recorded here, unassigned and ungraded.
What is authored
examples/schema-catalog/src/schemas/components-basic-icon/icon-sizes.json is, in full:
{"type": "flex", "gap": 4, "align": "center", "children": [
{"type": "icon", "icon": "star", "size": "sm"},
{"type": "icon", "icon": "star", "size": "md"},
{"type": "icon", "icon": "star", "size": "lg"},
{"type": "icon", "icon": "star", "size": "xl"}
]}
But IconSchema.size is declared size?: number — pixels, @default 24 (packages/types/src/layout.ts). The t-shirt enum belongs to SpinnerSchema.size, which is a genuine 'sm' | 'md' | 'lg' | 'xl'. The fixture appears to have borrowed the sibling's vocabulary.
Measured
IconRenderer builds sizeStyle = { width: schema.size, height: schema.size }, so an authored "sm" becomes style.width = 'sm' — an invalid CSS value the CSSOM drops. Rendered through the real SchemaRenderer on PR #7564's branch:
size="sm" -> width=24 height=24 style=null
size="md" -> width=24 height=24 style=null
size="lg" -> width=24 height=24 style=null
size="xl" -> width=24 height=24 style=null
size=24 -> width=24 height=24 style="width: 24px; height: 24px;"
size=48 -> width=24 height=24 style="width: 48px; height: 48px;"
So all four icons in a fixture named icon-sizes render at exactly the same size, and the example demonstrates nothing. The numeric rows are there to show the declared key does work.
Not caused by, and not worsened by, PR #7564
Worth stating precisely, because the branch is where this was found. Before that PR the bare spread also handed size to lucide's numeric size prop, so these nodes carried width="sm" height="sm" — invalid SVG dimensions, and the icons still all rendered at the fallback size. After it, the attributes are a valid 24. The fixture is equally broken either way; the PR makes the DOM valid without making the example correct. No row of the #5632 ledger is involved: width/height are legitimate on an SVG host, so no leak gate ever reported this in either direction.
Why it is worth a card rather than a drive-by edit
Two things could be wrong and they have different fixes:
- The fixture is simply off-spec and should author pixels (
16, 24, 32, 48). Cheapest, and it makes the example show four sizes.
IconSchema.size should accept the t-shirt scale the rest of the vocabulary uses, in which case the authored metadata is right and the contract is the thing that is wrong. SpinnerSchema already uses that scale for the same concept on the same kind of host, which is the argument for it.
That is a contract question, so it is not mine to answer inside an unrelated slice. Whichever way it goes, an off-spec size should be refused at authoring time rather than silently producing an invalid inline style — the same "declared = enforced" direction as #5631's resolution.
A wider sweep is probably worth doing with it: this was found by scanning JSON for icon/spinner nodes carrying size/color, and the same scan is what showed every authored icon color in the catalog is a Tailwind class. Other numeric-vs-enum key collisions of this shape may exist elsewhere in the catalog.
References
Found while burning the
BARE_SPREAD_ON_SVGgroup of #5632 (PR #7564). Out of that card's scope — it is authored metadata, not a renderer defect — so recorded here, unassigned and ungraded.What is authored
examples/schema-catalog/src/schemas/components-basic-icon/icon-sizes.jsonis, in full:{"type": "flex", "gap": 4, "align": "center", "children": [ {"type": "icon", "icon": "star", "size": "sm"}, {"type": "icon", "icon": "star", "size": "md"}, {"type": "icon", "icon": "star", "size": "lg"}, {"type": "icon", "icon": "star", "size": "xl"} ]}But
IconSchema.sizeis declaredsize?: number— pixels,@default 24(packages/types/src/layout.ts). The t-shirt enum belongs toSpinnerSchema.size, which is a genuine'sm' | 'md' | 'lg' | 'xl'. The fixture appears to have borrowed the sibling's vocabulary.Measured
IconRendererbuildssizeStyle = { width: schema.size, height: schema.size }, so an authored"sm"becomesstyle.width = 'sm'— an invalid CSS value the CSSOM drops. Rendered through the realSchemaRendereron PR #7564's branch:So all four icons in a fixture named
icon-sizesrender at exactly the same size, and the example demonstrates nothing. The numeric rows are there to show the declared key does work.Not caused by, and not worsened by, PR #7564
Worth stating precisely, because the branch is where this was found. Before that PR the bare spread also handed
sizeto lucide's numericsizeprop, so these nodes carriedwidth="sm" height="sm"— invalid SVG dimensions, and the icons still all rendered at the fallback size. After it, the attributes are a valid24. The fixture is equally broken either way; the PR makes the DOM valid without making the example correct. No row of the #5632 ledger is involved:width/heightare legitimate on an SVG host, so no leak gate ever reported this in either direction.Why it is worth a card rather than a drive-by edit
Two things could be wrong and they have different fixes:
16,24,32,48). Cheapest, and it makes the example show four sizes.IconSchema.sizeshould accept the t-shirt scale the rest of the vocabulary uses, in which case the authored metadata is right and the contract is the thing that is wrong.SpinnerSchemaalready uses that scale for the same concept on the same kind of host, which is the argument for it.That is a contract question, so it is not mine to answer inside an unrelated slice. Whichever way it goes, an off-spec
sizeshould be refused at authoring time rather than silently producing an invalid inline style — the same "declared = enforced" direction as #5631's resolution.A wider sweep is probably worth doing with it: this was found by scanning JSON for icon/spinner nodes carrying
size/color, and the same scan is what showed every authored iconcolorin the catalog is a Tailwind class. Other numeric-vs-enum key collisions of this shape may exist elsewhere in the catalog.References
examples/schema-catalog/src/schemas/components-basic-icon/icon-sizes.jsonpackages/types/src/layout.ts—IconSchema.size?: numberpackages/types/src/feedback.ts—SpinnerSchema.size?: 'sm' | 'md' | 'lg' | 'xl'packages/components/src/renderers/**, grouped by mechanism #5632 / PR fix(components): route the SVG-hosted renderers' spread throughtoDomProps#7564 — where it surfaced