import { onMount, type ComponentProps, splitProps } from "solid-js"
const icons = {
edit: {
viewBox: "0 0 16 16",
body: ``,
},
"folder-add-left": {
viewBox: "0 0 16 16",
body: ``,
},
"grid-plus": {
viewBox: "0 0 16 16",
body: ``,
},
help: {
viewBox: "0 0 16 16",
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 16 16",
body: ``,
},
"chevron-down": {
viewBox: "0 0 16 16",
body: ``,
},
check: {
viewBox: "0 0 16 16",
body: ``,
},
close: {
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: ``,
},
archive: {
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 (
)
}