SIcon `<s-icon>`

Polaris 아이콘 세트의 아이콘을 이름으로 표시합니다. SIcon은(는) Shopify Polaris <s-icon> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

import { SIcon } from 'polaris-vue-elements'

모범 사례

아이콘은 장식이 아니라 정보 전달에 사용하세요. 삭제 액션의 삭제 아이콘이나 완료된 항목의 체크 표시처럼, 아이콘은 액션이 하는 일을 설명하거나 상태를 보여 줘야 합니다. 보기 좋으라고 아이콘을 추가하지 마세요.
일관성을 유지하세요. 어떤 아이콘이 특정 액션이나 개념을 나타내게 되었다면 앱 전체에서 그대로 유지합니다. 한 곳에서 edit가 편집을 뜻한다면 모든 곳에서 편집에 사용합니다.
가능하면 아이콘과 텍스트를 함께 사용하세요. 익숙한 아이콘이라도 단독으로 쓰이면 여러 가지로 해석될 수 있습니다. 아이콘 단독 사용은 accessibilityLabel이 있는 아이콘 전용 버튼처럼 공간이 부족한 곳으로 한정합니다.
널리 알려진 아이콘을 고르세요. search, delete, plus처럼 의미가 정착된 아이콘을 우선합니다. 설명이 필요한 아이콘이라면 다른 아이콘을 고릅니다.
tone이 의미를 전달하게 하세요. 파괴적인 액션에는 tone="critical", 긍정적인 상태에는 tone="success", 주의에는 tone="warning"을 사용합니다. tone은 장식이 아니라 무언가를 전달해야 합니다.

vue

<SIcon type="alert-triangle" tone="warning" />

전체 가이드는 <s-icon>에 대한 Shopify 모범 사례(영어)를 참고하세요.

예시

vue

<script setup>
import { SIcon } from 'polaris-vue-elements'
</script>

<template>
  <!-- `type` accepts a large named-icon union; a few examples below. See
       src/lib/generated/types.ts for the full list. -->
  <SIcon type="star" />
  <SIcon type="cart" tone="info" />
  <SIcon type="check-circle" tone="success" />
  <SIcon type="alert-triangle" tone="warning" />
  <SIcon type="delete" tone="critical" />
  <SIcon type="settings" size="small" color="subdued" />
</template>

Props

Prop	타입	설명
`color`	`"subdued" \| "base"`	시각적 강도를 제어하는 색상 강조 수준입니다. - `base`: 본문 텍스트, 표준 UI 요소, 일반 콘텐츠를 위한 가독성 좋은 기본 색상입니다. - `subdued`: 보조 텍스트, 부가 레이블, 덜 중요한 인터페이스 요소를 위한 약한 색상입니다.
`interestFor`	`string`	이 컴포넌트에 대한 관심(예: 호버 및 포커스)에 응답해야 하는 컴포넌트의 ID입니다.
`size`	`"base" \| "small"`	아이콘의 크기입니다. - `small`: 텍스트 안의 인라인 사용이나 컴팩트한 UI 요소에 적합한 작은 아이콘입니다. - `base`: 독립형 아이콘과 일반적인 사용 사례에 잘 맞는 기본 크기입니다.
`tone`	`"auto" \| "neutral" \| "info" \| "success" \| "caution" \| "warning" \| "critical"`	컴포넌트의 시맨틱 의미와 색상 처리입니다. - `info`: 정보성 콘텐츠 또는 유용한 팁. - `success`: 긍정적인 결과 또는 성공 상태. - `warning`: 잠재적 문제에 대한 중요한 경고. - `critical`: 긴급한 문제 또는 파괴적인 액션. - `auto`: 컨텍스트에 따라 자동으로 결정됩니다. - `neutral`: 특정 의도가 없는 일반 정보. - `caution`: 주의가 필요한 권고 알림.
`type`	`"color" \| "info" \| "adjust" \| "affiliate" \| "airplane" \| "alert-bubble" \| "alert-circle" \| "alert-diamond" … (553 more)`	아이콘 라이브러리에서 표시할 아이콘입니다. 유효한 아이콘 이름을 설정하면 해당 아이콘이 표시됩니다. 아이콘을 완전히 숨기려면 빈 문자열 `''`을 사용합니다. 아이콘을 표시하지 않고 공간만 확보하려면 `'empty'`를 사용합니다.

위의 일부 타입 열은 읽기 쉽도록 축약되었습니다. 전체 union은 라이브러리에서 생성된 TypeScript 타입(src/lib/generated/types.ts)에 있습니다.

SIcon <s-icon> ​

모범 사례 ​

예시 ​

Props ​

SIcon `<s-icon>`

모범 사례

예시

Props