Graphic Icon

Utility component for rendering Bedrock graphic icons.

AccessibilityPermalink to: Accessibility

Graphic Icon has role="presentation" to explicitly mark it as purely decorative, preventing assistive technologies from misinterpreting it as conveying meaningful information.

ExamplesPermalink to: Examples

Graphic iconPermalink to: Graphic icon

Use the name prop to render a graphic icon (see list of graphic icons).

import { GraphicIcon } from "@peakon/bedrock/react/assets/GraphicIcon";

function Snippet() {
  return <GraphicIcon name="logos-wday-dub" />;
}

FormatsPermalink to: Formats

Graphic Icons can be rendered in SVG (default) or PNG format via the format prop.

import { GraphicIcon } from "@peakon/bedrock/react/assets/GraphicIcon";

function Snippet() {
  return (
    <>
      <GraphicIcon name="logos-wday-dub" format="svg" />
      <GraphicIcon name="logos-wday-dub" format="png" />
    </>
  );
}

Width and heightPermalink to: Width and height

Use the native HTML Image width and height attributes to set the size of the Graphic Icon.

import { GraphicIcon } from "@peakon/bedrock/react/assets/GraphicIcon";

function Snippet() {
  return <GraphicIcon name="logos-wday-dub" width="64" />;
}

Props TablePermalink to: Props Table

GraphicIconPermalink to: GraphicIcon

Props extend from HTML Image Element(external link), with the omission of role and style

RelatedPermalink to: Related

• List of graphic icons
• System Icon component
• Category Icon component
• Category Group Icon component