아이콘Icons

Phosphor RegularPhosphor Regular

아이콘은 @phosphor-icons/react의 Regular 굵기를 그대로 씁니다. 색은 currentColor를 따라가므로 주변 글자 색이 그대로 적용되고, 크기 기본값은 1em이라 글자 크기를 따릅니다.Icons are @phosphor-icons/react at the Regular weight. They take currentColor, so the surrounding text colour applies, and default to 1em so they follow the font size.

bun add @phosphor-icons/react

import { MagnifyingGlass } from "@phosphor-icons/react";

export function SearchHint() {
  return (
    <span className="flex items-center gap-1.5 text-label-md text-text-secondary">
      <MagnifyingGlass size={16} />
      Search
    </span>
  );
}

컴포넌트에 넘기기Pass an icon to a component

Button과 IconButton은 icon prop을 받습니다. Button의 아이콘은 라벨 앞에 놓이고 sm과 md에서 16px, lg에서 20px로 그려집니다. IconButton은 정사각이고 아이콘을 16, 20, 24px로 그립니다.Button and IconButton take an icon prop. A Button icon sits before the label and draws at 16px on sm and md, 20px on lg. IconButton is square and draws its icon at 16, 20 or 24px.

import { Button, IconButton } from "@horon-ai/react";
import { Plus, Trash } from "@phosphor-icons/react";

export function Toolbar() {
  return (
    <div className="flex items-center gap-2">
      <Button icon={<Plus />}>New bot</Button>
      <IconButton icon={<Trash />} label="Delete bot" variant="solid" />
    </div>
  );
}

크기와 색Size and colour

아이콘의 색은 텍스트 토큰 클래스로 정하고, 크기는 size-4 같은 유틸리티로 맞춥니다. 컴포넌트에 넘긴 아이콘은 컴포넌트가 크기를 잡으므로 size를 따로 주지 않습니다.Set an icon's colour with a text token class and its size with a utility such as size-4. An icon passed to a component is sized by that component, so leave size off it.

import { Trash } from "@phosphor-icons/react";

export function DeleteHint() {
  return (
    <span className="flex items-center gap-1.5 text-caption text-text-danger">
      <Trash className="size-4" />
      Delete removes the bot and its runs.
    </span>
  );
}

Horon 아이콘The Horon mark

Phosphor에 없는 Horon 눈 마크는 HoronIcon으로 그립니다. size는 px 숫자나 CSS 길이이고 기본값은 1em입니다. 이름을 데이터로 고르는 경우에는 HoronGlyph와 iconNames를 씁니다.The Horon eye mark, which Phosphor lacks, is HoronIcon. Its size is a px number or a CSS length and defaults to 1em. When the name comes from data, use HoronGlyph with iconNames.

import { HoronIcon } from "@horon-ai/react";

export function Brand() {
  return (
    <a href="/" className="flex items-center gap-2 text-label-lg text-text-primary">
      <HoronIcon size={22} />
      Horon
    </a>
  );
}