HonoのJSXでLucideを使う

こんな感じで使いたい。

import { Plus } from "lucide"
import { LucideIcon } from "~/islands/lucide-icon"

<LucideIcon class={"w-4"} icon={Plus} />

こんな感じの関数を定義できる。

import { jsx, type JSX } from "hono/jsx"
import type { IconNode } from "lucide"

type Props = JSX.IntrinsicElements["div"] & {
  icon: IconNode
}

export function LucideIcon(props: Props) {
  const {
    icon: [title, svgProps, paths],
    ...rest
  } = props

  if (paths === undefined) {
    return <svg />
  }

  return (
    <svg {...rest} {...svgProps}>
      <title>{title}</title>
      {paths.map(([tag, svgProps]) => jsx(tag, { ...svgProps }))}
    </svg>
  )
}