Icon

1import * as React from 'react';
2 
3import { cn } from '@/lib/utils';
4 
5export type IconSize = 'sm' | 'default' | 'lg';
6 
7export const IconSizeContext = React.createContext<IconSize | undefined>(
8  undefined,
9);
10 
11// QBDS optical-size contract: 20dp@400 → sm, 24dp@300 → default, 40dp@300 → lg.
12const SIZE_MAP: Record<
13  IconSize,
14  { fontSize: number; weight: number; opticalSize: number }
15> = {
16  sm: { fontSize: 16, weight: 400, opticalSize: 20 },
17  default: { fontSize: 24, weight: 300, opticalSize: 24 },
18  lg: { fontSize: 32, weight: 300, opticalSize: 40 },
19};
20 
21/** Match legacy SVG slots that only set Tailwind box utilities (e.g. size-4). */
22function inferIconSize(className?: string): IconSize | undefined {
23  if (!className) return undefined;
24  if (/\b(?:size|h)-8\b/.test(className)) return 'lg';
25  if (/\b(?:size|h)-6\b/.test(className)) return 'default';
26  if (/\b(?:size|h)-(?:4|5)\b/.test(className)) return 'sm';
27  return undefined;
28}
29 
30function Icon({
31  icon,
32  size: sizeProp,
33  className,
34  style,
35  ...props
36}: React.ComponentProps<'span'> & {
37  icon: string;
38  size?: IconSize;
39}) {
40  const sizeFromShell = React.useContext(IconSizeContext);
41  const size =
42    sizeProp ?? sizeFromShell ?? inferIconSize(className) ?? 'default';
43  const { fontSize, weight, opticalSize } = SIZE_MAP[size];
44 
45  return (
46    <span
47      data-slot="icon-glyph"
48      aria-hidden
49      className={cn(
50        'material-symbols-sharp inline-flex shrink-0 items-center justify-center leading-none',
51        className,
52      )}
53      style={{
54        fontSize,
55        width: fontSize,
56        height: fontSize,
57        lineHeight: `${fontSize}px`,
58        fontVariationSettings: `'FILL' 0, 'wght' ${weight}, 'opsz' ${opticalSize}`,
59        ...style,
60      }}
61      {...props}>
62      {icon}
63    </span>
64  );
65}
66 
67export { Icon, SIZE_MAP, inferIconSize };