Skip to content

Commit 3ed08b9

Browse files
tewarigtewarig
authored
feat: add forwardRef support to all icon components and new icons (#38)
1 parent 3ff2e48 commit 3ed08b9

1,652 files changed

Lines changed: 91137 additions & 95574 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.

‎assets/binoculars.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/calendar-1.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/decimals-arrow-right.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/solid-google.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎lib/icons/AArrowDown.tsx‎

Lines changed: 53 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,65 @@
11
import type React from 'react';
2-
import { cloneElement } from 'react';
2+
import { cloneElement, forwardRef } from 'react';
33
import type { IconSize } from '../icon-config.js';
44
import { ICON_SIZE_MAP, STROKE_WIDTH_MAP } from '../icon-config.js';
55
export interface IconProps extends React.SVGProps<SVGSVGElement> {
66
size?: IconSize | number;
77
strokeWidth?: number;
88
className?: string;
99
}
10-
const SvgAArrowDown = ({
11-
color = 'currentColor',
12-
size,
13-
strokeWidth,
14-
className,
15-
...props
16-
}: IconProps): React.ReactElement => {
17-
const element = (
18-
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
19-
<path
20-
d="M2.333 8.667h4m-5 2 3-6 3 6m4.667-6v6m0 0L9.333 8M12 10.667 14.666 8"
21-
stroke="inherit"
22-
strokeWidth={1.33}
23-
strokeLinecap="round"
24-
strokeLinejoin="round"
25-
/>
26-
</svg>
27-
);
28-
const hasViewBox = element.props.viewBox != null;
29-
const isCustomIcon = element.props['data-custom-icon'] === 'true';
30-
const defaultSize = isCustomIcon ? element.props.width : ICON_SIZE_MAP.xs;
31-
const resolvedSize =
32-
size != null ? (typeof size === 'number' ? size : ICON_SIZE_MAP[size]) : defaultSize;
33-
const resolvedStrokeWidth =
34-
strokeWidth != null
35-
? strokeWidth
36-
: typeof size === 'string' && size in STROKE_WIDTH_MAP
37-
? STROKE_WIDTH_MAP[size]
38-
: size == null
39-
? STROKE_WIDTH_MAP.xs
40-
: 2;
41-
const w = element.props.width != null ? Number(element.props.width) : 24;
42-
const h = element.props.height != null ? Number(element.props.height) : 24;
43-
const viewBoxWhenMissing = `0 0 ${w} ${h}`;
44-
const elementProps = {
45-
...props,
46-
className: className ? `signoz-icon ${className}` : 'signoz-icon',
47-
...(!isCustomIcon && {
48-
stroke: color,
49-
strokeWidth: resolvedStrokeWidth,
50-
}),
51-
...(!isCustomIcon &&
52-
!hasViewBox && {
10+
const SvgAArrowDown = forwardRef<SVGSVGElement, IconProps>(
11+
({ color = 'currentColor', size, strokeWidth, className, ...props }, ref) => {
12+
const element = (
13+
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
14+
<path
15+
d="M2.333 8.667h4m-5 2 3-6 3 6m4.667-6v6m0 0L9.333 8M12 10.667 14.666 8"
16+
stroke="inherit"
17+
strokeWidth={1.33}
18+
strokeLinecap="round"
19+
strokeLinejoin="round"
20+
/>
21+
</svg>
22+
);
23+
const hasViewBox = element.props.viewBox != null;
24+
const isCustomIcon = element.props['data-custom-icon'] === 'true';
25+
const defaultSize = isCustomIcon ? element.props.width : ICON_SIZE_MAP.xs;
26+
const resolvedSize =
27+
size != null ? (typeof size === 'number' ? size : ICON_SIZE_MAP[size]) : defaultSize;
28+
const resolvedStrokeWidth =
29+
strokeWidth != null
30+
? strokeWidth
31+
: typeof size === 'string' && size in STROKE_WIDTH_MAP
32+
? STROKE_WIDTH_MAP[size]
33+
: size == null
34+
? STROKE_WIDTH_MAP.xs
35+
: 2;
36+
const w = element.props.width != null ? Number(element.props.width) : 24;
37+
const h = element.props.height != null ? Number(element.props.height) : 24;
38+
const viewBoxWhenMissing = `0 0 ${w} ${h}`;
39+
const elementProps = {
40+
...props,
41+
ref,
42+
className: className ? `signoz-icon ${className}` : 'signoz-icon',
43+
...(!isCustomIcon && {
44+
stroke: color,
45+
strokeWidth: resolvedStrokeWidth,
46+
}),
47+
...(!isCustomIcon &&
48+
!hasViewBox && {
49+
viewBox: viewBoxWhenMissing,
50+
}),
51+
...(isCustomIcon && {
52+
style: {
53+
color,
54+
...props.style,
55+
},
5356
viewBox: viewBoxWhenMissing,
5457
}),
55-
...(isCustomIcon && {
56-
style: {
57-
color,
58-
...props.style,
59-
},
60-
viewBox: viewBoxWhenMissing,
61-
}),
62-
width: resolvedSize,
63-
height: resolvedSize,
64-
};
65-
return cloneElement(element, elementProps);
66-
};
58+
width: resolvedSize,
59+
height: resolvedSize,
60+
};
61+
return cloneElement(element, elementProps);
62+
},
63+
);
6764
SvgAArrowDown.displayName = 'SvgAArrowDown';
6865
export default SvgAArrowDown;

‎lib/icons/AArrowUp.tsx‎

Lines changed: 53 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,65 @@
11
import type React from 'react';
2-
import { cloneElement } from 'react';
2+
import { cloneElement, forwardRef } from 'react';
33
import type { IconSize } from '../icon-config.js';
44
import { ICON_SIZE_MAP, STROKE_WIDTH_MAP } from '../icon-config.js';
55
export interface IconProps extends React.SVGProps<SVGSVGElement> {
66
size?: IconSize | number;
77
strokeWidth?: number;
88
className?: string;
99
}
10-
const SvgAArrowUp = ({
11-
color = 'currentColor',
12-
size,
13-
strokeWidth,
14-
className,
15-
...props
16-
}: IconProps): React.ReactElement => {
17-
const element = (
18-
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
19-
<path
20-
d="M2.333 8.667h4m-5 2 3-6 3 6m4.667 0v-6m0 0L9.333 7.333M12 4.667l2.666 2.666"
21-
stroke="inherit"
22-
strokeWidth={1.33}
23-
strokeLinecap="round"
24-
strokeLinejoin="round"
25-
/>
26-
</svg>
27-
);
28-
const hasViewBox = element.props.viewBox != null;
29-
const isCustomIcon = element.props['data-custom-icon'] === 'true';
30-
const defaultSize = isCustomIcon ? element.props.width : ICON_SIZE_MAP.xs;
31-
const resolvedSize =
32-
size != null ? (typeof size === 'number' ? size : ICON_SIZE_MAP[size]) : defaultSize;
33-
const resolvedStrokeWidth =
34-
strokeWidth != null
35-
? strokeWidth
36-
: typeof size === 'string' && size in STROKE_WIDTH_MAP
37-
? STROKE_WIDTH_MAP[size]
38-
: size == null
39-
? STROKE_WIDTH_MAP.xs
40-
: 2;
41-
const w = element.props.width != null ? Number(element.props.width) : 24;
42-
const h = element.props.height != null ? Number(element.props.height) : 24;
43-
const viewBoxWhenMissing = `0 0 ${w} ${h}`;
44-
const elementProps = {
45-
...props,
46-
className: className ? `signoz-icon ${className}` : 'signoz-icon',
47-
...(!isCustomIcon && {
48-
stroke: color,
49-
strokeWidth: resolvedStrokeWidth,
50-
}),
51-
...(!isCustomIcon &&
52-
!hasViewBox && {
10+
const SvgAArrowUp = forwardRef<SVGSVGElement, IconProps>(
11+
({ color = 'currentColor', size, strokeWidth, className, ...props }, ref) => {
12+
const element = (
13+
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
14+
<path
15+
d="M2.333 8.667h4m-5 2 3-6 3 6m4.667 0v-6m0 0L9.333 7.333M12 4.667l2.666 2.666"
16+
stroke="inherit"
17+
strokeWidth={1.33}
18+
strokeLinecap="round"
19+
strokeLinejoin="round"
20+
/>
21+
</svg>
22+
);
23+
const hasViewBox = element.props.viewBox != null;
24+
const isCustomIcon = element.props['data-custom-icon'] === 'true';
25+
const defaultSize = isCustomIcon ? element.props.width : ICON_SIZE_MAP.xs;
26+
const resolvedSize =
27+
size != null ? (typeof size === 'number' ? size : ICON_SIZE_MAP[size]) : defaultSize;
28+
const resolvedStrokeWidth =
29+
strokeWidth != null
30+
? strokeWidth
31+
: typeof size === 'string' && size in STROKE_WIDTH_MAP
32+
? STROKE_WIDTH_MAP[size]
33+
: size == null
34+
? STROKE_WIDTH_MAP.xs
35+
: 2;
36+
const w = element.props.width != null ? Number(element.props.width) : 24;
37+
const h = element.props.height != null ? Number(element.props.height) : 24;
38+
const viewBoxWhenMissing = `0 0 ${w} ${h}`;
39+
const elementProps = {
40+
...props,
41+
ref,
42+
className: className ? `signoz-icon ${className}` : 'signoz-icon',
43+
...(!isCustomIcon && {
44+
stroke: color,
45+
strokeWidth: resolvedStrokeWidth,
46+
}),
47+
...(!isCustomIcon &&
48+
!hasViewBox && {
49+
viewBox: viewBoxWhenMissing,
50+
}),
51+
...(isCustomIcon && {
52+
style: {
53+
color,
54+
...props.style,
55+
},
5356
viewBox: viewBoxWhenMissing,
5457
}),
55-
...(isCustomIcon && {
56-
style: {
57-
color,
58-
...props.style,
59-
},
60-
viewBox: viewBoxWhenMissing,
61-
}),
62-
width: resolvedSize,
63-
height: resolvedSize,
64-
};
65-
return cloneElement(element, elementProps);
66-
};
58+
width: resolvedSize,
59+
height: resolvedSize,
60+
};
61+
return cloneElement(element, elementProps);
62+
},
63+
);
6764
SvgAArrowUp.displayName = 'SvgAArrowUp';
6865
export default SvgAArrowUp;

‎lib/icons/ALargeSmall.tsx‎

Lines changed: 53 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,65 @@
11
import type React from 'react';
2-
import { cloneElement } from 'react';
2+
import { cloneElement, forwardRef } from 'react';
33
import type { IconSize } from '../icon-config.js';
44
import { ICON_SIZE_MAP, STROKE_WIDTH_MAP } from '../icon-config.js';
55
export interface IconProps extends React.SVGProps<SVGSVGElement> {
66
size?: IconSize | number;
77
strokeWidth?: number;
88
className?: string;
99
}
10-
const SvgALargeSmall = ({
11-
color = 'currentColor',
12-
size,
13-
strokeWidth,
14-
className,
15-
...props
16-
}: IconProps): React.ReactElement => {
17-
const element = (
18-
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
19-
<path
20-
d="M14 9.333h-3.333m0 1.334V8.333a1.667 1.667 0 0 1 3.333 0v2.334m-11-2h4m-5 2 3-6 3 6"
21-
stroke="inherit"
22-
strokeWidth={1.33}
23-
strokeLinecap="round"
24-
strokeLinejoin="round"
25-
/>
26-
</svg>
27-
);
28-
const hasViewBox = element.props.viewBox != null;
29-
const isCustomIcon = element.props['data-custom-icon'] === 'true';
30-
const defaultSize = isCustomIcon ? element.props.width : ICON_SIZE_MAP.xs;
31-
const resolvedSize =
32-
size != null ? (typeof size === 'number' ? size : ICON_SIZE_MAP[size]) : defaultSize;
33-
const resolvedStrokeWidth =
34-
strokeWidth != null
35-
? strokeWidth
36-
: typeof size === 'string' && size in STROKE_WIDTH_MAP
37-
? STROKE_WIDTH_MAP[size]
38-
: size == null
39-
? STROKE_WIDTH_MAP.xs
40-
: 2;
41-
const w = element.props.width != null ? Number(element.props.width) : 24;
42-
const h = element.props.height != null ? Number(element.props.height) : 24;
43-
const viewBoxWhenMissing = `0 0 ${w} ${h}`;
44-
const elementProps = {
45-
...props,
46-
className: className ? `signoz-icon ${className}` : 'signoz-icon',
47-
...(!isCustomIcon && {
48-
stroke: color,
49-
strokeWidth: resolvedStrokeWidth,
50-
}),
51-
...(!isCustomIcon &&
52-
!hasViewBox && {
10+
const SvgALargeSmall = forwardRef<SVGSVGElement, IconProps>(
11+
({ color = 'currentColor', size, strokeWidth, className, ...props }, ref) => {
12+
const element = (
13+
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
14+
<path
15+
d="M14 9.333h-3.333m0 1.334V8.333a1.667 1.667 0 0 1 3.333 0v2.334m-11-2h4m-5 2 3-6 3 6"
16+
stroke="inherit"
17+
strokeWidth={1.33}
18+
strokeLinecap="round"
19+
strokeLinejoin="round"
20+
/>
21+
</svg>
22+
);
23+
const hasViewBox = element.props.viewBox != null;
24+
const isCustomIcon = element.props['data-custom-icon'] === 'true';
25+
const defaultSize = isCustomIcon ? element.props.width : ICON_SIZE_MAP.xs;
26+
const resolvedSize =
27+
size != null ? (typeof size === 'number' ? size : ICON_SIZE_MAP[size]) : defaultSize;
28+
const resolvedStrokeWidth =
29+
strokeWidth != null
30+
? strokeWidth
31+
: typeof size === 'string' && size in STROKE_WIDTH_MAP
32+
? STROKE_WIDTH_MAP[size]
33+
: size == null
34+
? STROKE_WIDTH_MAP.xs
35+
: 2;
36+
const w = element.props.width != null ? Number(element.props.width) : 24;
37+
const h = element.props.height != null ? Number(element.props.height) : 24;
38+
const viewBoxWhenMissing = `0 0 ${w} ${h}`;
39+
const elementProps = {
40+
...props,
41+
ref,
42+
className: className ? `signoz-icon ${className}` : 'signoz-icon',
43+
...(!isCustomIcon && {
44+
stroke: color,
45+
strokeWidth: resolvedStrokeWidth,
46+
}),
47+
...(!isCustomIcon &&
48+
!hasViewBox && {
49+
viewBox: viewBoxWhenMissing,
50+
}),
51+
...(isCustomIcon && {
52+
style: {
53+
color,
54+
...props.style,
55+
},
5356
viewBox: viewBoxWhenMissing,
5457
}),
55-
...(isCustomIcon && {
56-
style: {
57-
color,
58-
...props.style,
59-
},
60-
viewBox: viewBoxWhenMissing,
61-
}),
62-
width: resolvedSize,
63-
height: resolvedSize,
64-
};
65-
return cloneElement(element, elementProps);
66-
};
58+
width: resolvedSize,
59+
height: resolvedSize,
60+
};
61+
return cloneElement(element, elementProps);
62+
},
63+
);
6764
SvgALargeSmall.displayName = 'SvgALargeSmall';
6865
export default SvgALargeSmall;

0 commit comments

Comments
 (0)