feat: provider icon component

1 files changed, 24 insertions, 0 deletions

diff --git a/packages/ui/src/components/provider-icon.tsx b/packages/ui/src/components/provider-icon.tsx
new file mode 100644
index 000000000..924dcd25c
--- /dev/null
+++ b/packages/ui/src/components/provider-icon.tsx
@@ -0,0 +1,24 @@
+import type { Component, JSX } from "solid-js"
+import { splitProps } from "solid-js"
+import sprite from "./provider-icons/sprite.svg"
+import type { IconName } from "./provider-icons/types"
+
+export type ProviderIconProps = JSX.SVGElementTags["svg"] & {
+  name: IconName
+}
+
+export const ProviderIcon: Component<ProviderIconProps> = (props) => {
+  const [local, rest] = splitProps(props, ["name", "class", "classList"])
+  return (
+    <svg
+      data-component="provider-icon"
+      {...rest}
+      classList={{
+        ...(local.classList ?? {}),
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <use href={`${sprite}#${local.name}`} />
+    </svg>
+  )
+}