Icon

󰕈󰘕󰁰󰁳󰒔󰯱󰈯

Import

import { WebIcon } from "@pelagornis/page/components";

Example

The preview above renders this file. Copy it into src/components/ to start from it.

src/components/IconExample.tsx

import { Stack, WebIcon } from "@pelagornis/page/components";

const icons = ["search", "add", "settings", "home", "document", "chevron_right"];

export default function IconDemo() {
  return (
    <Stack direction="row" gap="sizeLarge" align="center" wrap>
      {icons.map((name) => (
        <WebIcon key={name} name={name} size={24} color="currentColor" aria-label={name} />
      ))}
      <WebIcon name="heart" size={24} iconStyle="filled" color="currentColor" aria-label="heart filled" />
    </Stack>
  );
}

Use in MDX

Icon can be written straight in an .mdx page. Import it below the frontmatter. It renders on the server, so no client directive is needed.

src/content/docs/example.mdx

---
title: Example
---

import { WebIcon } from "@pelagornis/page/components";

<WebIcon name="search" size={24} aria-label="Search" />

Use in Markdoc

pageMarkdoc() registers a icon tag for this component. Add the preset once in markdoc.config.mjs (see Use in Markdoc), then write the tag in any .mdoc page.

src/content/docs/example.mdoc

{% icon name="search" size=24 ariaLabel="Search" /%}

Attributes use the same names and values as the React props.

Reference

• Use in MDX and Use in Markdoc for the general rules.