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에서 사용을 참고하세요.