Icon

SVG 또는 이미지 아이콘의 크기와 상호작용을 일관되게 제공합니다.

<sy-icon>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

크기

선택 허용원본 비율

코드 보기

HTML

<sy-icon size="xlarge" aria-label="즐겨찾기"><svg xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
  >
    <path fill="currentColor" d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" />
  </svg></sy-icon>

사용 가이드

의미를 보조하거나 동작을 표현합니다. 아이콘만으로 동작을 제공할 때는 접근성 이름을 함께 지정하세요.

SVG 직접 제공

SVG 슬롯 또는 svgMarkup으로 아이콘을 전달합니다.

파일로 제공

path에 브라우저가 접근할 수 있는 파일 URL을 지정하세요.

예제

크기

텍스트와 동작 영역의 크기에 맞춰 선택합니다.

코드 보기

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-icon size="small"><svg xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path fill="currentColor"
        d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" />
    </svg></sy-icon>
  <sy-icon size="medium"><svg xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path fill="currentColor"
        d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" />
    </svg></sy-icon>
  <sy-icon size="large"><svg xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path fill="currentColor"
        d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" />
    </svg></sy-icon>
  <sy-icon size="xlarge"><svg xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path fill="currentColor"
        d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" />
    </svg></sy-icon>
  <sy-icon size="xxlarge"><svg xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path fill="currentColor"
        d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" />
    </svg></sy-icon>
</div>

파일에서 불러오기

path로 프로젝트의 SVG를 사용합니다.

코드 보기

HTML

<sy-icon path="/assets/examples/star.svg" size="xxlarge"></sy-icon>

SVG 문자열

svgMarkup 속성으로 앱에서 관리하는 SVG를 전달합니다.

코드 보기

HTML

<sy-icon
  svg-markup="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z&quot;/&gt;&lt;/svg&gt;"
  size="xxlarge"
></sy-icon>

키보드로 선택

Tab으로 이동한 뒤 Enter 또는 Space로 선택합니다.

코드 보기

HTML

<sy-icon
  size="xxlarge"
  selectable
  aria-label="즐겨찾기"
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path fill="currentColor" d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" />
  </svg></sy-icon>

이벤트와 전달 값

컴포넌트를 조작하고 최근 이벤트의 이름과 detail 값을 확인하세요. 코드에는 이 컴포넌트와 하위 구성 요소가 보내는 이벤트의 구독 방법이 모두 포함되어 있습니다.

코드 보기

HTML

<sy-icon size="xlarge" aria-label="즐겨찾기"><svg xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
  >
    <path fill="currentColor" d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" />
  </svg></sy-icon>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  for (const name of ["selected"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

원본 종횡비 유지

naturalAspect로 아이콘의 원래 비율을 유지합니다. 정사각형이 아닌 로고나 심벌에 사용하세요.

코드 보기

HTML

<sy-icon
  size="xlarge"
  natural-aspect
  aria-label="즐겨찾기"
  id="supplement-1"
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path fill="currentColor" d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" />
  </svg></sy-icon>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "naturalAspect": true
  });
</script>

기능별 예제

6개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview

전체 아이콘의 크기와 Regular·Solid 스타일을 바꾸고, 아이콘을 눌러 실제 SVG 코드를 복사합니다.

코드 보기

HTML

예제를 불러오고 있습니다.

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.

속성 · Path

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기

HTML

예제를 불러오고 있습니다.

속성 · Selectable

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기

HTML

예제를 불러오고 있습니다.

속성 · Size

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기

HTML

예제를 불러오고 있습니다.

이벤트 · Selected

컴포넌트를 조작하면 아래 실행 화면에 이벤트 이름과 전달 값이 표시됩니다.

코드 보기

HTML

예제를 불러오고 있습니다.

API reference

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

`<sy-icon>`

Properties

Type	Default	Description
`'xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge' \| 'xxxlarge'`	`'medium'`	컴포넌트의 크기입니다.
`string`	`undefined`	아이콘 SVG 또는 이미지 URL입니다.
`string`	`undefined`	표시할 SVG 마크업 문자열입니다.
`boolean`	`false`	원본 SVG의 가로세로 비율을 유지합니다.
`boolean`	`false`	선택 이벤트와 키보드 조작을 허용합니다.

Events

Event	Detail	Description
	`CustomEvent<{ value: string }>`	사용자가 항목을 선택했을 때 발생합니다.

Slots

Slot	Description
	컴포넌트의 본문 또는 자식 항목입니다.