feat(docs): docs-native Icon component, drop @ably/ui/core/Icon (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';