SIcon <s-icon>
ts
import { SIcon } from 'polaris-vue-elements'Example
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 | Type | Description |
|---|---|---|
color | "subdued" | "base" | Modify the color to be more or less intense. |
interestFor | string | ID of a component that should respond to interest (e.g. hover and focus) on this component. |
size | "base" | "small" | Adjusts the size of the icon. |
tone | "auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical" | Sets the tone of the icon, based on the intention of the information being conveyed. |
type | "color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (510 more) | Specifies the type of icon that will be displayed. |
Some type columns above are truncated for readability; the full union is available in the library's generated TypeScript types (
src/lib/generated/types.ts).