Icon Media

1
2
3import type { ReactNode } from 'react';

import { IconMedia } from '@/registry/bases/base-ui/components/general/icon-media';

Installation#

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/icon-media.json

Usage#

import { IconMedia } from '@/components/general/icon-media';

<Tooltip>
  <TooltipTrigger render={<IconMedia aria-label="Vision input" className="bg-muted text-muted-foreground" />}>
    <EyeIcon aria-hidden />
  </TooltipTrigger>
  <TooltipContent>Vision input</TooltipContent>
</Tooltip>

It carries no meaning of its own, so one serves a model ability, a generation type or any icon the caller picks; give it an aria-label, and compose a tooltip around it when the glyph needs words. For a field's own text label, use Icon Label instead.

API reference#

IconMedia#

Renders a span and takes every prop a span takes. The design system ships no tint for it; the caller's className supplies the colours. An svg child with no size-* class of its own is drawn at size-3. It sets data-slot="icon-media".