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" を使います。トーンは装飾ではなく、何かを伝えるためのものです。

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