DX-1128: docs-native Icon component and direct HeroIcon usage (drop @ably/ui/core/Icon)

[jamiehenson]

Part of DX-1128. Replaces @ably/ui/core/Icon with a docs-native Icon (src/components/Icon/).

What

• index.tsx — the docs-native Icon, which now renders Ably's own glyphs only (product / social / tech / gui-prod / badge); set-unique-ids.ts (useId-keyed) rewrites gradient/mask ids per instance; null fallback for unknown names.
• glyphs/ — those glyphs as typed .tsx forwardRef components + a generated index, produced by running @ably/ui's own SVGR pipeline (generate-icons.ts config) over its source SVGs. Byte-equivalent SVG output to the compiled originals — no visual change.
• Heroicons are no longer resolved by name through Icon. Every former <Icon name="icon-gui-*-{outline,solid,mini,micro}"> is now a direct @heroicons/react component import at the call site, so they tree-shake. @heroicons/react promoted to a direct dep (outline/solid/mini/micro → 24/24/20/16).
• Codemodded the direct heroicon call sites; Header/LanguageSelector tests updated to query by role/label (and the burger button gained an aria-label).

Behaviour

No visual change intended. Glyph coverage verified (no misses); Heroicons render identically as direct components.

Stack (DX-1128)

	PR	Role
	#3409	Design foundation — vendor @ably/ui tokens + reset/core CSS (merged)
	#3410	Local cn + heights utils
▶	#3411	Docs-native Icon component (Ably glyphs only; Heroicons imported directly)
	#3412	Presentational components (Badge, Button, LinkButton, FeaturedLink, Status)
	#3413	Interactive components (SegmentedControl, TabMenu)
	#3414	ProductTile + product data (leaf)
	#3415	syntax-highlighter util + registry
	#3416	Code + CodeSnippet — completes the lift; prunes dead CSS + drops @ably/ui Tailwind scan

#3410–#3416 are a linear stack, each building on the previous; #3409 has merged to main. ▶ = this PR.

Testing

• Load the review app.
• Check a sufficient sample of pages load with no visual regressions.

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 11777981-76c0-478c-8ba7-1cfabeeb6681

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch dx-1128/docs-local-icon

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[kennethkalmer]

Quick browse around the site showed nothing obviously broken, but botticus picked up some things to investigate when I asked it to review and cross-reference with the original code in @ably/ui

[kennethkalmer]

Review focused on icon-name resolution after the switch to the docs-native Icon. One live regression (Footer feedback icons), plus a few sharp edges around silent null-rendering. Details inline.

[jamiehenson]

Thanks @kennethkalmer - the bot has done its responses but to summarise here, I've tightened up the type definition for the icons (tbh, I would like this to be as minimal as possible in future by leaning on HeroIcons more, but I'm already satisfied with the direction this PR goes in in terms of dethroning the overcomplicated Icon component) and pulled in something that was further down the stack but opened up a regression here.

[kennethkalmer]

All five review threads addressed and verified against the pushed code:

• Footer feedback icons now hold direct Heroicon component refs (outline + solid), rendered directly — matches the codemod. (Confirmed dormant behind ENABLE_FEEDBACK, but right to fix.)
• IconName narrowed to keyof typeof glyphs | icon-tech-${string}`` with the glyphs map closed via satisfies — static names now typecheck against the registry.
• Dev-only console.warn on unresolved names covers the dynamic tail.
• Social links carry aria-labels, so forced aria-hidden keeps accessible names intact.
• Comment nit fixed.

LGTM.