import { onMount, type ComponentProps, splitProps } from "solid-js" const icons = { edit: { viewBox: "0 0 20 20", body: ``, }, "folder-add-left": { viewBox: "0 0 20 20", body: ``, }, "grid-plus": { viewBox: "0 0 16 16", body: ``, }, help: { viewBox: "0 0 20 20", body: ``, }, "sidebar-right": { viewBox: "0 0 20 20", body: ``, }, status: { viewBox: "0 0 20 20", body: ``, }, "status-active": { viewBox: "0 0 20 20", body: ``, }, "magnifying-glass": { viewBox: "0 0 16 16", body: ``, }, menu: { viewBox: "0 0 16 16", body: ``, }, plus: { viewBox: "0 0 16 16", body: ``, }, "settings-gear": { viewBox: "0 0 20 20", body: ``, }, "xmark-small": { viewBox: "0 0 16 16", body: ``, }, "outline-chevron-down": { viewBox: "0 0 16 16", body: ``, }, "outline-dots": { viewBox: "0 0 16 16", body: ``, }, } const spriteID = "opencode-v2-icon-sprite" const symbol = (name: keyof typeof icons) => `opencode-v2-icon-${name}` let spriteInserted = false function ensureSprite() { if (spriteInserted) return if (typeof document === "undefined") return if (document.getElementById(spriteID)) { spriteInserted = true return } const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg") svg.id = spriteID svg.setAttribute("aria-hidden", "true") svg.setAttribute("width", "0") svg.setAttribute("height", "0") svg.style.position = "absolute" svg.style.overflow = "hidden" svg.innerHTML = Object.entries(icons) .map( ([name, icon]) => `${icon.body}`, ) .join("") document.body.insertBefore(svg, document.body.firstChild) spriteInserted = true } export interface IconProps extends ComponentProps<"svg"> { name: keyof typeof icons | (string & {}) size?: "small" | "normal" | "large" } export function Icon(props: IconProps) { const [split, rest] = splitProps(props, ["name", "size"]) const iconName = () => (icons[split.name as keyof typeof icons] ? (split.name as keyof typeof icons) : "plus") const icon = () => icons[iconName()] const pixelSize = split.size === "small" ? 14 : split.size === "large" ? 20 : 16 onMount(ensureSprite) return ( ) }