feat(docs): docs-native Icon component, drop @ably/ui/core/Icon (DX-1128)

Vendor a local Icon that renders only Ably's own glyphs (product, social,
tech, gui-prod). Heroicons are now imported directly from @heroicons/react
as components at each call site, so they tree-shake instead of going through
a name->component lookup that bundles the whole set. This keeps the custom
Icon's responsibility narrow and matches the direction for the rest of the
vendored components.

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,6 +1,6 @@
 import React from 'react';
-import Icon from '@ably/ui/core/Icon';
 import cn from 'src/utilities/cn';
+import { CheckIcon } from '@heroicons/react/24/outline';
 
 const ExamplesCheckbox = ({
   label,
@@ -35,10 +35,9 @@ const ExamplesCheckbox = ({
         data-ui-checkbox-styled=""
         className={cn(['ui-checkbox-styled', disabled && '!border-neutral-800 !bg-orange-600'])}
       >
-        <Icon
-          size="1rem"
-          name="icon-gui-check-outline"
-          additionalCSS={cn(['ui-checkbox-styled-tick cursor-pointer', disabled && 'text-neutral-000'])}
+        <CheckIcon
+          className={cn('size-[1rem]', cn(['ui-checkbox-styled-tick cursor-pointer', disabled && 'text-neutral-000']))}
+          aria-hidden
         />
       </div>
       <label htmlFor={name} className="ui-text-p4 text-neutral-900">

src/components/Examples/ExamplesFilter.tsx

@@ -1,6 +1,5 @@
 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 { Input } from 'src/components/ui/Input';
 import { products } from '../../data/examples';
 import Button from '@ably/ui/core/Button';
@@ -11,6 +10,7 @@ import { SelectedFilters } from './ExamplesContent';
 import { useOnClickOutside } from 'src/hooks/use-on-click-outside';
 import { navigate } from 'gatsby';
 import { ProductName } from '@ably/ui/core/ProductTile/data';
+import { MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/24/outline';
 
 const ExamplesFilter = ({
   selected,
@@ -113,10 +113,9 @@ const ExamplesFilter = ({
   return (
     <>
       <div className="relative w-full">
-        <Icon
-          name="icon-gui-magnifying-glass-outline"
-          size="16px"
-          additionalCSS="absolute left-3 top-1/2 -translate-y-1/2 z-10 text-neutral-600 dark:text-neutral-700 pointer-events-none"
+        <MagnifyingGlassIcon
+          className="size-[16px] absolute left-3 top-1/2 -translate-y-1/2 z-10 text-neutral-600 dark:text-neutral-700 pointer-events-none"
+          aria-hidden
         />
         <Input
           type="search"
@@ -154,7 +153,7 @@ const ExamplesFilter = ({
         <div className="flex justify-between items-center sm:hidden h-16 px-4 py-2 bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 rounded-t-2xl sm:rounded-none">
           <p className="ui-text-p1 font-bold text-neutral-1300 dark:text-neutral-000">Filters</p>
           <button onClick={closeFilterMenu} aria-label="Close filter menu">
-            <Icon name="icon-gui-x-mark-outline" size="24px" />
+            <XMarkIcon className="size-[24px]" aria-hidden />
           </button>
         </div>
         {filters.map(({ key, selected, handleSelect, data }) => (

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';