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"。色调应传达信息，而不是用于装饰。

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

参阅 Shopify 关于 <s-icon> 的最佳实践（英文）以获取完整指南。

示例

<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'。

为便于阅读，上面部分类型列已被截断；完整的联合类型见库中生成的 TypeScript 类型（src/lib/generated/types.ts）。