[giamir]

Why

SVGs from Stacks Icons can contain gradients and other resources with fixed IDs. When Icon renders the same SVG more than once, duplicate IDs can make a visible copy resolve its paint reference to an earlier hidden copy. This caused the native Microsoft Teams icon to appear blank in the Stack Internal source list.

What changed

Icon now gives each rendered SVG's IDs a stable, instance-specific prefix and updates its url(#...), fragment href, and ARIA ID references. This applies to any SVG passed to Icon, without icon-specific logic.

• Adds browser tests for repeated SVG resources and for two Microsoft Teams icons with the first hidden.
• Raises the Svelte peer minimum to 5.20, which introduced SSR-safe $props.id().
• Adds a patch changeset for @stackoverflow/stacks-svelte.

Review notes

The peer dependency minimum changes from Svelte 5.19 to 5.20. Icon props and styling remain the same.

Reviewer test plan

Run npm run test -w packages/stacks-svelte. For a visual check, render two native IconServiceMicrosoftTeams icons, hide the first, and confirm the second retains its colors.

[netlify]

✅ Deploy Preview for stacks-svelte ready!

Name	Link
🔨 Latest commit	1bf1a66
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/6aba44a9ed9544000860dd11
😎 Deploy Preview	https://deploy-preview-2416--stacks-svelte.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1bf1a66

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@stackoverflow/stacks-svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for stackoverflow-email ready!

Name	Link
🔨 Latest commit	1bf1a66
🔍 Latest deploy log	https://app.netlify.com/projects/stackoverflow-email/deploys/6aba44a9c35fa6000841de63
😎 Deploy Preview	https://deploy-preview-2416--stackoverflow-email.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	1bf1a66
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/6aba44a982faa00008a78f4a
😎 Deploy Preview	https://deploy-preview-2416--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[asblanco]

During review, we (Codex and I?) found that SVG ID scoping only recognized double-quoted attributes. Because Icon accepts arbitrary valid SVG strings, single-quoted or mixed-quote markup could be partially rewritten—for example, id="dot" became instance-scoped while href='#dot' remained unchanged, causing the referenced element not to render.

Commit 1bf1a66
The implementation now supports both quote styles for IDs, href/xlink:href, ARIA references, and quoted or unquoted url() references. The existing double-quote behavior and alternate quoting are covered through parameterized regression tests.