syidaxdesign system
홈 가격 내 정보
ComponentsData display

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>

API reference

#

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

<sy-icon>

Properties

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

Events

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

Slots

SlotDescription
컴포넌트의 본문 또는 자식 항목입니다.
Design SystemTab 이동 Enter 열기