refactor(docs): replace @ably/ui/core/Icon with a local Icon component

docs-native Icon (DX-1128), removing the @ably/ui/core/Icon dependency:
- icon-gui-* names resolve to @heroicons/react (exactly what @ably/ui did
  internally, so the glyphs are identical) — added as a direct dependency.
- The remaining 46 icons docs actually uses (custom gui, product, social and
  tech/SDK-language logos) are vendored from @ably/ui as self-contained SVG
  components under src/components/Icon/glyphs/ with a generated registry.
- Unknown names render nothing, matching @ably/ui's behaviour for an
  unrecognised icon (covers cpp/dart/etc. that have no upstream glyph).
- Codemod: 26 import sites moved off @ably/ui/core/Icon + /Icon/types.

Coverage verified: every icon docs renders (static names + the dynamic
icon-tech-${lang} set from languageInfo) resolves via Heroicons or the
registry. Vendored glyphs are excluded from eslint/prettier.

Colour is applied via currentColor + additionalCSS; brand logos keep their own
colours (design sign-off covers any visual nuance).

Refs: DX-1128

Author: jamiehenson

.eslintignore

@@ -0,0 +1 @@
+src/components/Icon/glyphs/

.prettierignore

@@ -9,3 +9,6 @@ data/onPostBuild/__fixtures__/*.mdx
 
 # Vendored @ably/ui design tokens, reset and component CSS (DX-1128) - do not reformat
 src/styles/ui/
+
+# Vendored @ably/ui icon glyphs (DX-1128) - do not reformat
+src/components/Icon/glyphs/

package.json

@@ -45,6 +45,7 @@
     "@codesandbox/sandpack-react": "^2.20.0",
     "@codesandbox/sandpack-themes": "^2.0.21",
     "@gfx/zopfli": "^1.0.15",
+    "@heroicons/react": "^2.2.0",
     "@mdx-js/react": "^2.3.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dropdown-menu": "^2.1.16",

src/components/Examples/ExamplesCheckbox.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon from '@ably/ui/core/Icon';
+import Icon from 'src/components/Icon';
 import cn from 'src/utilities/cn';
 
 const ExamplesCheckbox = ({

src/components/Examples/ExamplesFilter.tsx

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, Dispatch, SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import Icon from '@ably/ui/core/Icon';
+import Icon from 'src/components/Icon';
 import { Input } from 'src/components/ui/Input';
 import { products } from '../../data/examples';
 import Button from '@ably/ui/core/Button';

src/components/Examples/ExamplesGrid.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import Badge from '@ably/ui/core/Badge';
-import Icon from '@ably/ui/core/Icon';
-import { IconName } from '@ably/ui/core/Icon/types';
+import Icon from 'src/components/Icon';
+import { IconName } from 'src/components/Icon/types';
 import { ProductName, products as dataProducts } from '@ably/ui/core/ProductTile/data';
 import cn from 'src/utilities/cn';
 import { Image, ImageProps } from '../Image';

src/components/Examples/ExamplesRenderer.tsx

@@ -5,7 +5,7 @@ import { CodeEditor } from 'src/components/CodeEditor';
 import { LanguageKey } from 'src/data/languages/types';
 import { ExampleFiles, ExampleWithContent } from 'src/data/examples/types';
 import { updateAblyConnectionKey } from 'src/utilities/update-ably-connection-keys';
-import { IconName } from '@ably/ui/core/Icon/types';
+import { IconName } from 'src/components/Icon/types';
 import SegmentedControl from '@ably/ui/core/SegmentedControl';
 import dotGrid from './images/dot-grid.svg';
 import cn from 'src/utilities/cn';