SIcon <s-icon>

Exibe um ícone do conjunto de ícones do Polaris pelo nome. SIcon é o wrapper de Vue 3 tipado do web component <s-icon> do Shopify Polaris.

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

Boas práticas

• Use ícones para informar, não para decorar. Um ícone deve explicar o que uma ação faz ou mostrar um estado, como um ícone de lixeira em uma ação de excluir ou um check para algo concluído. Não adicione ícones só pela aparência.
• Seja consistente. Depois que um ícone passar a representar uma ação ou um conceito, mantenha esse significado em todo o seu app. Se edit significa editar em um lugar, use-o para editar em todos os lugares.
• Combine ícones com texto sempre que puder. Sozinhos, até ícones conhecidos podem ser interpretados de mais de uma forma. Use um ícone sozinho apenas onde o espaço for limitado, como em um botão só com ícone que tenha um accessibilityLabel.
• Escolha ícones amplamente reconhecidos. Prefira ícones com significados consolidados, como search, delete e plus. Se um ícone precisa de explicação, escolha outro.
• Deixe o tone transmitir significado. Use tone="critical" para ações destrutivas, tone="success" para estados positivos e tone="warning" para cautela. Os tons devem comunicar algo, não decorar.

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

Veja as boas práticas da Shopify para <s-icon> (em inglês) para todas as recomendações.

Exemplo

<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	Tipo	Descrição
color	"subdued" | "base"	O nível de ênfase de cor que controla a intensidade visual. - base: cor principal para texto do corpo, elementos de interface padrão e conteúdo geral, com boa legibilidade. - subdued: cor atenuada para texto secundário, rótulos de apoio e elementos de interface menos importantes.
interestFor	string	ID de um componente que deve responder ao interesse (por exemplo, passar o cursor e focar) neste componente.
size	"base" | "small"	O tamanho do ícone. - small: ícone menor, adequado para uso em linha dentro de texto ou em elementos de interface compactos. - base: tamanho padrão que funciona bem para ícones independentes e casos de uso comuns.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	O significado semântico e o tratamento de cor do componente. - info: conteúdo informativo ou dicas úteis. - success: resultados positivos ou estados de sucesso. - warning: avisos importantes sobre possíveis problemas. - critical: problemas urgentes ou ações destrutivas. - auto: determinado automaticamente com base no contexto. - neutral: informações gerais sem uma intenção específica. - caution: avisos de alerta que precisam de atenção.
type	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	O ícone da biblioteca de ícones a ser exibido. Defina um nome de ícone válido para exibir esse ícone. Para ocultar o ícone completamente, use uma string vazia ''. Para reservar o espaço do ícone sem exibi-lo, use 'empty'.

Algumas colunas de tipo acima estão truncadas para facilitar a leitura; a união completa está disponível nos tipos TypeScript gerados da biblioteca (src/lib/generated/types.ts).