createIconLoader() — ui Function Reference

Architecture documentation for the createIconLoader() function in create-icon-loader.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry calls 2

Entity Profile

ComponentRegistry→ ChartRegistry→ createIconLoader() — ui Function Reference

Dependency Diagram

graph TD
  37e84a20_1268_7c64_3cfa_16a4e674f1d0["createIconLoader()"]
  8f16ccd8_8171_26c3_e15a_50ba9fc94180["create-icon-loader.tsx"]
  37e84a20_1268_7c64_3cfa_16a4e674f1d0 -->|defined in| 8f16ccd8_8171_26c3_e15a_50ba9fc94180
  f91d6262_afd9_096a_b9b7_5ad798f6c9be["getCache()"]
  37e84a20_1268_7c64_3cfa_16a4e674f1d0 -->|calls| f91d6262_afd9_096a_b9b7_5ad798f6c9be
  e7e8e87c_43b5_7572_7d98_81a12a528f08["isIconData()"]
  37e84a20_1268_7c64_3cfa_16a4e674f1d0 -->|calls| e7e8e87c_43b5_7572_7d98_81a12a528f08
  style 37e84a20_1268_7c64_3cfa_16a4e674f1d0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/icons/create-icon-loader.tsx lines 20–51

export function createIconLoader(libraryName: string) {
  const cache = getCache(libraryName)

  return function IconLoader({
    name,
    strokeWidth = 2,
    ...props
  }: {
    name: string
  } & React.ComponentProps<"svg">) {
    if (!cache.has(name)) {
      const promise = import(`./__${libraryName}__`).then((mod) => {
        const icon = mod[name as keyof typeof mod]
        return icon || null
      })
      cache.set(name, promise)
    }

    const iconData = use(cache.get(name)!)

    if (!iconData) {
      return null
    }

    if (isIconData(iconData)) {
      return <HugeiconsIcon icon={iconData} strokeWidth={2} {...props} />
    }

    const IconComponent = iconData
    return <IconComponent {...props} />
  }
}