import { IconClose, IconDefault } from '@orioncactuscorp/icons';

export function Example() {
  return (
    <button type='button' aria-label='닫기'>
      <IconClose />
    </button>
  );
}

번들 경계를 더 작게 유지해야 하는 내부 패키지 코드는 per-icon subpath를 사용할 수 있습니다.

import IconClose from '@orioncactuscorp/icons/orioncactus/Close';

SvgIcon Contract

SvgIcon은 비상호작용 시각 SVG primitive입니다. 클릭, 포커스, 키보드 상호작용은 button, a, IconButton 같은 부모 control이 담당해야 합니다.

// 권장: 버튼이 의미와 클릭을 담당
<button type='button' aria-label='닫기'>
  <IconClose />
</button>

// 금지: 아이콘 자체가 control이 되면 안 됨
<IconClose onClick={close} role='button' tabIndex={0} />

SvgIcon은 기본적으로 decorative icon으로 렌더링하며 aria-hidden='true'를 갖습니다. 아이콘 자체가 독립적인 의미를 가질 때만 title, desc, aria-label, aria-labelledby를 사용하세요.

<IconCheck title='완료' />
<IconDefault title='orioncactus' desc='orioncactus 기본 플레이스홀더 아이콘' />

SvgIcon은 title 값을 <title> element로 렌더링합니다. 버튼 안의 아이콘처럼 부모 control이 accessible name을 이미 갖는 경우에는 title을 넣지 않습니다.

Styling

아이콘은 기본적으로 currentColor를 사용합니다.

<IconCheck color='var(--oc-color-theme-primary-normal)' size={20} />

size는 number, CSS size string, 또는 custom을 받을 수 있습니다. custom은 부모 CSS가 직접 width/height를 제어할 때 사용합니다.

<IconCheck size={20} />
<IconCheck size='1.25em' />
<IconCheck size='custom' className='myIcon' />

SvgIcon은 SVG native presentation props를 전달합니다. 단, 각 icon의 내부 path 구조에 따라 stroke, strokeWidth 같은 prop이 시각적으로 반영되지 않을 수 있습니다.

material-rounded와 alternate icon set은 @orioncactuscorp/icons에 포함하지 않습니다. 필요한 경우 출처와 license notice를 분리한 별도 optional package로 추가합니다.

@orioncactuscorp/icons