Skip to content

Commit 6c83436

Browse files
committed
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.
1 parent b94efdf commit 6c83436

94 files changed

Lines changed: 1206 additions & 148 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.eslintignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Icon glyphs — generated via SVGR from @ably/ui's SVG sources (DX-1128)
2+
src/components/Icon/glyphs/

.prettierignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,6 @@ data/onPostBuild/__fixtures__/*.mdx
99

1010
# Vendored @ably/ui design tokens, reset and component CSS (DX-1128) - do not reformat
1111
src/styles/ui/
12+
13+
# Icon glyphs — generated via SVGR from @ably/ui's SVG sources (DX-1128), do not reformat
14+
src/components/Icon/glyphs/

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"@codesandbox/sandpack-react": "^2.20.0",
4646
"@codesandbox/sandpack-themes": "^2.0.21",
4747
"@gfx/zopfli": "^1.0.15",
48+
"@heroicons/react": "^2.2.0",
4849
"@mdx-js/react": "^2.3.0",
4950
"@radix-ui/react-accordion": "^1.2.12",
5051
"@radix-ui/react-dropdown-menu": "^2.1.16",

src/components/Examples/ExamplesCheckbox.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import Icon from '@ably/ui/core/Icon';
32
import cn from 'src/utilities/cn';
3+
import { CheckIcon } from '@heroicons/react/24/outline';
44

55
const ExamplesCheckbox = ({
66
label,
@@ -35,10 +35,9 @@ const ExamplesCheckbox = ({
3535
data-ui-checkbox-styled=""
3636
className={cn(['ui-checkbox-styled', disabled && '!border-neutral-800 !bg-orange-600'])}
3737
>
38-
<Icon
39-
size="1rem"
40-
name="icon-gui-check-outline"
41-
additionalCSS={cn(['ui-checkbox-styled-tick cursor-pointer', disabled && 'text-neutral-000'])}
38+
<CheckIcon
39+
className={cn('size-[1rem]', cn(['ui-checkbox-styled-tick cursor-pointer', disabled && 'text-neutral-000']))}
40+
aria-hidden
4241
/>
4342
</div>
4443
<label htmlFor={name} className="ui-text-p4 text-neutral-900">

src/components/Examples/ExamplesFilter.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { ChangeEvent, Dispatch, SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from 'react';
22
import ReactDOM from 'react-dom';
3-
import Icon from '@ably/ui/core/Icon';
43
import { Input } from 'src/components/ui/Input';
54
import { products } from '../../data/examples';
65
import Button from '@ably/ui/core/Button';
@@ -11,6 +10,7 @@ import { SelectedFilters } from './ExamplesContent';
1110
import { useOnClickOutside } from 'src/hooks/use-on-click-outside';
1211
import { navigate } from 'gatsby';
1312
import { ProductName } from '@ably/ui/core/ProductTile/data';
13+
import { MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/24/outline';
1414

1515
const ExamplesFilter = ({
1616
selected,
@@ -113,10 +113,9 @@ const ExamplesFilter = ({
113113
return (
114114
<>
115115
<div className="relative w-full">
116-
<Icon
117-
name="icon-gui-magnifying-glass-outline"
118-
size="16px"
119-
additionalCSS="absolute left-3 top-1/2 -translate-y-1/2 z-10 text-neutral-600 dark:text-neutral-700 pointer-events-none"
116+
<MagnifyingGlassIcon
117+
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"
118+
aria-hidden
120119
/>
121120
<Input
122121
type="search"
@@ -154,7 +153,7 @@ const ExamplesFilter = ({
154153
<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">
155154
<p className="ui-text-p1 font-bold text-neutral-1300 dark:text-neutral-000">Filters</p>
156155
<button onClick={closeFilterMenu} aria-label="Close filter menu">
157-
<Icon name="icon-gui-x-mark-outline" size="24px" />
156+
<XMarkIcon className="size-[24px]" aria-hidden />
158157
</button>
159158
</div>
160159
{filters.map(({ key, selected, handleSelect, data }) => (

src/components/Examples/ExamplesGrid.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useCallback } from 'react';
22
import Badge from '@ably/ui/core/Badge';
3-
import Icon from '@ably/ui/core/Icon';
4-
import { IconName } from '@ably/ui/core/Icon/types';
3+
import Icon from 'src/components/Icon';
4+
import { IconName } from 'src/components/Icon/types';
55
import { ProductName, products as dataProducts } from '@ably/ui/core/ProductTile/data';
66
import cn from 'src/utilities/cn';
77
import { Image, ImageProps } from '../Image';

src/components/Examples/ExamplesRenderer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { CodeEditor } from 'src/components/CodeEditor';
55
import { LanguageKey } from 'src/data/languages/types';
66
import { ExampleFiles, ExampleWithContent } from 'src/data/examples/types';
77
import { updateAblyConnectionKey } from 'src/utilities/update-ably-connection-keys';
8-
import { IconName } from '@ably/ui/core/Icon/types';
8+
import { IconName } from 'src/components/Icon/types';
99
import SegmentedControl from '@ably/ui/core/SegmentedControl';
1010
import dotGrid from './images/dot-grid.svg';
1111
import cn from 'src/utilities/cn';
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import * as React from "react";
2+
import type { SVGProps } from "react";
3+
import { Ref, forwardRef } from "react";
4+
interface SVGRProps {
5+
title?: string;
6+
titleId?: string;
7+
}
8+
const IconGuiAblyBadge = ({
9+
title,
10+
titleId,
11+
...props
12+
}: 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>;
13+
const ForwardRef = forwardRef(IconGuiAblyBadge);
14+
export default ForwardRef;
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import * as React from "react";
2+
import type { SVGProps } from "react";
3+
import { Ref, forwardRef } from "react";
4+
interface SVGRProps {
5+
title?: string;
6+
titleId?: string;
7+
}
8+
const IconGuiProdAiTransportOutline = ({
9+
title,
10+
titleId,
11+
...props
12+
}: 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>;
13+
const ForwardRef = forwardRef(IconGuiProdAiTransportOutline);
14+
export default ForwardRef;
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import * as React from "react";
2+
import type { SVGProps } from "react";
3+
import { Ref, forwardRef } from "react";
4+
interface SVGRProps {
5+
title?: string;
6+
titleId?: string;
7+
}
8+
const IconGuiProdAiTransportSolid = ({
9+
title,
10+
titleId,
11+
...props
12+
}: 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>;
13+
const ForwardRef = forwardRef(IconGuiProdAiTransportSolid);
14+
export default ForwardRef;

0 commit comments

Comments
 (0)