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

.eslintignore

@@ -0,0 +1,2 @@
+# Icon glyphs — generated via SVGR from @ably/ui's SVG sources (DX-1128)
+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/
+
+# Icon glyphs — generated via SVGR from @ably/ui's SVG sources (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';
 
 // Matches Tailwind's `sm` screen (768px), where the filter switches from the
 // mobile drawer (with an Apply button) to the inline desktop sidebar. Above
@@ -118,10 +118,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"
@@ -159,7 +158,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';

src/components/Icon/glyphs/icon-gui-ably-badge.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiAblyBadge = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" fillRule="evenodd" d="M2.77 19.615 11.849 3H9.4L1 18.373zm18.282 0L11.975 3h2.449l8.399 15.373zm-9.14-6.962 9.014 7.06L19.086 21l-7.174-5.617L4.737 21l-1.84-1.288z" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconGuiAblyBadge);
+export default ForwardRef;

src/components/Icon/glyphs/icon-gui-prod-ai-transport-outline.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdAiTransportOutline = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.307} d="M11.498 1.016c.334 0 .628.221.72.543l.811 2.841A3.74 3.74 0 0 0 15.6 6.971l2.841.812a.749.749 0 0 1 0 1.44l-2.84.811a3.74 3.74 0 0 0-2.572 2.572l-.812 2.84a.749.749 0 0 1-1.44 0l-.811-2.84a3.74 3.74 0 0 0-2.571-2.572l-2.841-.811a.749.749 0 0 1 0-1.44l2.84-.812a3.74 3.74 0 0 0 2.572-2.57l.812-2.842a.75.75 0 0 1 .72-.543" clipRule="evenodd" /><path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.307} d="M7.455 14.642 3.56 18.536M5.059 12.995l-2.097 2.097" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdAiTransportOutline);
+export default ForwardRef;

src/components/Icon/glyphs/icon-gui-prod-ai-transport-solid.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdAiTransportSolid = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="#FF5416" d="M19.638 8.502c0 .626-.415 1.177-1.017 1.349l-2.841.812a3.09 3.09 0 0 0-2.122 2.121l-.812 2.842a1.402 1.402 0 0 1-2.697 0l-.812-2.841a3.09 3.09 0 0 0-2.121-2.122L4.374 9.85a1.402 1.402 0 0 1 0-2.697l2.842-.812A3.09 3.09 0 0 0 9.337 4.22l.812-2.841a1.402 1.402 0 0 1 2.697 0l.812 2.841a3.09 3.09 0 0 0 2.122 2.122l2.841.812a1.4 1.4 0 0 1 1.017 1.348M6.993 14.18a.653.653 0 1 1 .924.924l-3.894 3.893a.653.653 0 0 1-.924-.924zM4.597 12.533a.653.653 0 1 1 .924.924l-2.097 2.096a.653.653 0 1 1-.924-.924z" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdAiTransportSolid);
+export default ForwardRef;

src/components/Icon/glyphs/icon-gui-prod-chat-outline.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdChatOutline = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke="currentColor" strokeWidth={1.5} d="M7 3h10a3.333 3.333 0 0 1 3.333 3.333v12.402c0 .869-1.031 1.324-1.673.739l-3.802-3.467a.67.67 0 0 0-.45-.174H7A3.333 3.333 0 0 1 3.667 12.5V6.333A3.333 3.333 0 0 1 7 3Z" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdChatOutline);
+export default ForwardRef;

src/components/Icon/glyphs/icon-gui-prod-chat-solid.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdChatSolid = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" fillRule="evenodd" d="M2.917 6.333A4.083 4.083 0 0 1 7 2.25h10a4.083 4.083 0 0 1 4.083 4.083v12.402c0 1.52-1.805 2.318-2.929 1.293l-3.778-3.445H7A4.083 4.083 0 0 1 2.917 12.5z" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdChatSolid);
+export default ForwardRef;

src/components/Icon/glyphs/icon-gui-prod-liveobjects-outline.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdLiveobjectsOutline = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke="currentColor" strokeLinecap="round" strokeWidth={1.5} d="M14.038 3h2.886A4.076 4.076 0 0 1 21 7.075v2.887M9.962 3H7.075A4.075 4.075 0 0 0 3 7.075v2.887m0 4.076v2.886A4.076 4.076 0 0 0 7.075 21h2.887M21 14.038v2.886A4.076 4.076 0 0 1 16.924 21h-2.886" /><path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="m8.434 12.34 2.887 2.887 4.415-6.453" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdLiveobjectsOutline);
+export default ForwardRef;

src/components/Icon/glyphs/icon-gui-prod-liveobjects-solid.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdLiveobjectsSolid = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" fillRule="evenodd" d="M7 2a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5zm9.355 7.197a.75.75 0 0 0-1.238-.847l-3.905 5.707-2.248-2.248a.75.75 0 1 0-1.06 1.06l2.886 2.888a.75.75 0 0 0 1.15-.107z" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdLiveobjectsSolid);
+export default ForwardRef;

src/components/Icon/glyphs/icon-gui-prod-livesync-outline.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdLivesyncOutline = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke="currentColor" strokeLinecap="round" strokeWidth={1.5} d="M19.703 20H12v-5.884c0-.125.143-.196.242-.12l7.552 5.733a.151.151 0 0 1-.091.271ZM4 10.189v3.773A6.04 6.04 0 0 0 10.038 20H12M4.297 4H12v5.884a.151.151 0 0 1-.242.12L4.206 4.272A.15.15 0 0 1 4.297 4ZM20 13.812v-3.774A6.04 6.04 0 0 0 13.962 4H12" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdLivesyncOutline);
+export default ForwardRef;

src/components/Icon/glyphs/icon-gui-prod-livesync-solid.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdLivesyncSolid = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" fillRule="evenodd" d="M20 14.561a.75.75 0 0 1-.75-.75v-3.773a5.29 5.29 0 0 0-5.288-5.288H12.75v5.134a.9.9 0 0 1-1.446.718L3.753 4.868c-.688-.522-.319-1.618.544-1.618h9.665a6.79 6.79 0 0 1 6.788 6.788v3.773a.75.75 0 0 1-.75.75M4 9.438a.75.75 0 0 1 .75.75v3.774a5.29 5.29 0 0 0 5.288 5.288h1.212v-5.134a.901.901 0 0 1 1.446-.718l7.551 5.733c.688.523.319 1.619-.544 1.619h-9.665a6.79 6.79 0 0 1-6.788-6.788v-3.774a.75.75 0 0 1 .75-.75" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdLivesyncSolid);
+export default ForwardRef;

src/components/Icon/glyphs/icon-gui-prod-pubsub-outline.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdPubsubOutline = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke="currentColor" strokeWidth={1.5} d="M10.994 3.328 4.106 14.404a.692.692 0 0 0 .587 1.057h7.235c.191 0 .346.155.346.347v4.499c0 .696.913.956 1.28.365l6.889-11.076a.692.692 0 0 0-.588-1.057H12.62a.346.346 0 0 1-.346-.347V3.694c0-.697-.912-.957-1.28-.366Z" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdPubsubOutline);
+export default ForwardRef;

src/components/Icon/glyphs/icon-gui-prod-pubsub-solid.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdPubsubSolid = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" fillRule="evenodd" d="M10.357 2.932c.766-1.232 2.667-.69 2.667.762v4.095h6.831a1.442 1.442 0 0 1 1.225 2.204L14.19 21.068c-.766 1.232-2.667.69-2.667-.761v-4.095h-6.83a1.442 1.442 0 0 1-1.225-2.204z" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdPubsubSolid);
+export default ForwardRef;

src/components/Icon/glyphs/icon-gui-prod-spaces-outline.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdSpacesOutline = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke="currentColor" strokeWidth={1.5} d="M8.262 19.89 4.292 5.543a1.018 1.018 0 0 1 1.252-1.252l14.345 3.97c.941.26 1.011 1.568.104 1.928l-6.475 2.567a1.36 1.36 0 0 0-.761.761l-2.567 6.475c-.36.907-1.667.837-1.928-.104Z" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdSpacesOutline);
+export default ForwardRef;

src/components/Icon/glyphs/icon-gui-prod-spaces-solid.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdSpacesSolid = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" d="M3.569 5.744C3.203 4.42 4.42 3.203 5.744 3.57l14.345 3.97c1.634.453 1.756 2.723.18 3.348l-6.474 2.567a.6.6 0 0 0-.34.34l-2.568 6.476c-.625 1.575-2.895 1.453-3.347-.18z" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdSpacesSolid);
+export default ForwardRef;

src/components/Icon/glyphs/icon-gui-resources.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiResources = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" fillRule="evenodd" d="M5 1.5c-.69 0-1.25.56-1.25 1.25v1H5a.75.75 0 0 1 0 1.5H3.75v1.5H5a.75.75 0 0 1 0 1.5H3.75v1.5H5a.75.75 0 0 1 0 1.5H3.75v1.5H5a.75.75 0 0 1 0 1.5H3.75v1.5H5a.75.75 0 0 1 0 1.5H3.75v1.5H5a.75.75 0 0 1 0 1.5H3.75v1c0 .69.56 1.25 1.25 1.25h13.5c.69 0 1.25-.56 1.25-1.25v-1.5H12A2.75 2.75 0 0 1 9.25 17v-5A2.75 2.75 0 0 1 12 9.25h7.75v-5.5A2.25 2.25 0 0 0 17.5 1.5zM2.25 2.75v1H1a.75.75 0 0 0 0 1.5h1.25v1.5H1a.75.75 0 0 0 0 1.5h1.25v1.5H1a.75.75 0 0 0 0 1.5h1.25v1.5H1a.75.75 0 0 0 0 1.5h1.25v1.5H1a.75.75 0 0 0 0 1.5h1.25v1.5H1a.75.75 0 0 0 0 1.5h1.25v1A2.75 2.75 0 0 0 5 24h13.5a2.75 2.75 0 0 0 2.75-2.75v-1.511A2.75 2.75 0 0 0 23.75 17v-5a2.75 2.75 0 0 0-2.5-2.739V3.75A3.75 3.75 0 0 0 17.5 0H5a2.75 2.75 0 0 0-2.75 2.75m18.25 8H12c-.69 0-1.25.56-1.25 1.25v5c0 .69.56 1.25 1.25 1.25h9c.69 0 1.25-.56 1.25-1.25v-5c0-.69-.56-1.25-1.25-1.25zm-8-6.5a1.5 1.5 0 0 1 1.5-1.5h3a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-3a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm1.5 9.508 1.975 1.241L15.5 15.74zm2.542 2.066a.97.97 0 0 0 0-1.65l-2.024-1.272c-.641-.402-1.518.034-1.518.825v2.545c0 .79.877 1.227 1.518.824z" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconGuiResources);
+export default ForwardRef;

src/components/Icon/glyphs/icon-product-ai-transport-mono.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconProductAiTransportMono = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={128} height={128} fill="none" viewBox="0 0 128 128" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={6} d="M74 4a5 5 0 0 1 4.808 3.626l5.42 18.975a25 25 0 0 0 17.171 17.17l18.975 5.421a5 5 0 0 1 0 9.616l-18.975 5.42A25 25 0 0 0 84.229 81.4l-5.421 18.975a5 5 0 0 1-9.616 0l-5.42-18.975A25 25 0 0 0 46.6 64.229l-18.975-5.421a5 5 0 0 1 0-9.616l18.975-5.42A25 25 0 0 0 63.771 26.6l5.421-18.975A5 5 0 0 1 74 4" clipRule="evenodd" /><path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={6} d="m47 95-26 26M31 84 17 98" /></svg>;
+const ForwardRef = forwardRef(IconProductAiTransportMono);
+export default ForwardRef;