Skip to Content

Logo

<Clover.Logo /><clover-logo>0.9 kB added to a page with a Root, gzipped15 kB added to a page with a <clover-root>, styles included, gzipped

A provider’s logo, named by the provider.
<Clover.Root iiifContent={url}>
  <Clover.Logo />
</Clover.Root>
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-logo></clover-logo>
</clover-root>

API reference

Reads the logo of each of the resource’s providers (its provider) and renders an img for each, the first logo a provider gives. Inside a Provider<clover-provider>, it shows the logo of the provider it is drawn for. It renders nothing while there is none, nor for a logo whose image fails to load, never the browser’s broken picture, and its other props go to each img.

Its alt is the provider’s name, else its homepage’s, else “Logo”: give your own, or alt="" where the name is written beside it. It is --clover-logo-height tall, 1.618rem by default, and as wide as that makes it, never wider than its room.

PropTypeDefaultDescription
of"manifest" | "canvas""manifest"Whose providers: the resource’s, or the Canvas the reader is on.
value{ id, width, height }, providers—Logos to show instead: images, or providers with theirs.
altstringthe provider’s nameIts alt text.
classNamestring—Added to clover-logo.

A provider's logo, its alt text the provider's name: each of the resource's providers' in turn. Inside a clover-provider it draws nothing itself, and the provider draws each provider's logo in its place.

NameTypeDefaultDescription
of"manifest" | "canvas"manifestWhose property: the Manifest's, or the Canvas in view's.
valuestring (a URL or JSON)—Logos: images, or Agents with theirs, instead of the root's: as text, a URL or JSON. Outside a root, the one to show.
altstring—Its alt text instead of the provider's name: "" where the name is written beside it.
.valueRecord<string, unknown> | Array<Record<string, unknown>> | null—As a property: Logos: images, or Agents with theirs, instead of the root's.

Examples

Its size

Set --clover-logo-height for a larger or smaller logo; its width follows.

<Clover.Logo style={{ "--clover-logo-height": "2.618rem" }} />
<clover-logo style="--clover-logo-height: 2.618rem"></clover-logo>