Icon

import { iconField } from "@/fields/icon"
import type { Block } from "payload"

export const ExampleBlock: Block = {
  slug: "example",
  interfaceName: "Example",
  fields: [
    // your other fields
    iconField,
  ],
}

import type { Example } from "@/payload-types"
import Image from "next/image"

export function ExampleBlock(props: Example) {
  const icon = props.icon
  if (!icon) return null

  if (icon.useSvgRaw && icon.svgRaw) {
    return <span aria-hidden dangerouslySetInnerHTML={{ __html: icon.svgRaw }} />
  }

  if (typeof icon.iconFile === "object" && icon.iconFile?.url) {
    return (
      <Image
        src={icon.iconFile.url}
        alt=""
        className="size-8"
        width={32}
        height={32}
      />
    )
  }

  return null
}