1import { useId, type CSSProperties, type SVGProps } from "react";
2
3import type { ProviderIcon } from "@t3tools/provider-core/client";
4
5import { cn } from "~/lib/utils";
6
7export function ProviderPackageIcon({
8 icon,
9 className,
10 ...props
11}: { readonly icon: ProviderIcon } & SVGProps<SVGSVGElement>) {
12 const gradientId = useId();
13 return (
14 <svg
15 {...props}
16 viewBox={icon.viewBox}
17 fill="none"
18 data-provider-package-icon
19 className={cn("fill-(--icon-light) dark:fill-(--icon-dark)", className)}
20 style={
21 {
22 "--icon-light": icon.fill.light,
23 "--icon-dark": icon.fill.dark,
24 } as CSSProperties
25 }
26 >
27 {icon.paths.some((path) => path.gradient) ? (
28 <defs>
29 {icon.paths.map((path, index) =>
30 path.gradient ? (
31 <linearGradient
32 key={path.d}
33 id={`${gradientId}-${index}`}
34 x1={path.gradient.x1}
35 y1={path.gradient.y1}
36 x2={path.gradient.x2}
37 y2={path.gradient.y2}
38 gradientUnits="userSpaceOnUse"
39 >
40 {path.gradient.stops.map((stop) => (
41 <stop key={stop.offset} offset={stop.offset} stopColor={stop.color} />
42 ))}
43 </linearGradient>
44 ) : null,
45 )}
46 </defs>
47 ) : null}
48 {icon.paths.map((path, index) => (
49 <path
50 key={path.d}
51 d={path.d}
52 fillRule={path.fillRule}
53 fill={path.gradient ? `url(#${gradientId}-${index})` : undefined}
54 data-icon-detail={path.fill ? true : undefined}
55 className={path.fill ? "fill-(--path-light) dark:fill-(--path-dark)" : undefined}
56 style={
57 path.fill
58 ? ({
59 "--path-light": path.fill.light,
60 "--path-dark": path.fill.dark,
61 } as CSSProperties)
62 : undefined
63 }
64 />
65 ))}
66 </svg>
67 );
68}