Icon

󰕈󰘕󰁰󰁳󰒔󰯱󰈯

インポート

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

例

上のプレビューはこのファイルを描画したものです。src/components/ にコピーして使い始めてください。

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>
  );
}

MDX で使う

Icon は .mdx ページにそのまま書けます。frontmatter の下でインポートしてください。サーバーで描画されるので、client ディレクティブは要りません。

src/content/docs/example.mdx

---
title: Example
---

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

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

Markdoc で使う

pageMarkdoc() がこのコンポーネントの icon タグを登録します。markdoc.config.mjs にプリセットを一度追加すれば（Markdoc で使うを参照）、どの .mdoc ページでもタグを書けます。

src/content/docs/example.mdoc

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

属性の名前と値は React の props と同じです。

参考

• 共通のルールは MDX で使う と Markdoc で使う を参照してください。