IconsPage() — ui Function Reference

Architecture documentation for the IconsPage() function in page.tsx from the ui codebase.

Function tsx ComponentRegistry Styles

Entity Profile

ComponentRegistry→ Styles→ IconsPage() — ui Function Reference

Dependency Diagram

graph TD
  7e0151ec_ec9f_623c_00b1_da80ef883b16["IconsPage()"]
  12db5bf2_e504_79a1_741a_3b5d5857c4bb["page.tsx"]
  7e0151ec_ec9f_623c_00b1_da80ef883b16 -->|defined in| 12db5bf2_e504_79a1_741a_3b5d5857c4bb
  style 7e0151ec_ec9f_623c_00b1_da80ef883b16 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/app/(internal)/icons/page.tsx lines 16–52

export default function IconsPage() {
  return (
    <div>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="w-[240px]" align="left">
              name
            </TableHead>
            {Object.keys(iconLibraries).map((library) => (
              <TableHead key={library}>{library}</TableHead>
            ))}
          </TableRow>
        </TableHeader>
        <TableBody>
          {Object.entries(Icons).map(([name, icon]) => (
            <TableRow key={name}>
              <TableCell align="left">
                <code>{name}</code>
              </TableCell>
              {Object.entries(iconLibraries).map(([library, name]) => {
                const IconComponent = icon[library as keyof typeof icon]
                return (
                  <TableCell key={library} className="[&_svg]:h-4 [&_svg]:w-4">
                    <React.Suspense fallback={<div>Loading...</div>}>
                      {IconComponent && <IconComponent />}
                    </React.Suspense>
                  </TableCell>
                )
              })}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}