SIcon <s-icon>

Muestra un icono del conjunto de iconos de Polaris por su nombre. SIcon es el wrapper de Vue 3 tipado del web component <s-icon> de Shopify Polaris.

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

Buenas prácticas

• Usa los iconos para informar, no para decorar. Un icono debe explicar lo que hace una acción o mostrar un estado, como un icono de eliminar en una acción de eliminar o una marca de verificación para algo completado. No añadas iconos solo por estética.
• Sé coherente. Una vez que un icono representa una acción o un concepto, mantén ese significado en toda tu app. Si edit significa editar en un lugar, úsalo para editar en todos los lugares.
• Acompaña los iconos con texto cuando puedas. Por sí solos, incluso los iconos conocidos pueden interpretarse de más de una forma. Usa un icono solo únicamente cuando falte espacio, como en un botón de solo icono con un accessibilityLabel.
• Elige iconos ampliamente reconocidos. Prefiere iconos con significados consolidados, como search, delete y plus. Si un icono necesita explicación, elige otro.
• Deja que tone transmita el significado. Usa tone="critical" para acciones destructivas, tone="success" para estados positivos y tone="warning" para indicar precaución. Los tonos deben comunicar algo, no decorar.

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

Consulta las buenas prácticas de Shopify para <s-icon> (en inglés) para ver todas las recomendaciones.

Ejemplo

<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	Descripción
color	"subdued" | "base"	El nivel de énfasis de color que controla la intensidad visual. - base: color principal para el texto del cuerpo, los elementos de interfaz estándar y el contenido general, con buena legibilidad. - subdued: color atenuado para texto secundario, etiquetas de apoyo y elementos de interfaz menos importantes.
interestFor	string	ID de un componente que debe responder al interés (p. ej., al pasar el cursor por encima y al enfocar) en este componente.
size	"base" | "small"	El tamaño del icono. - small: icono más pequeño, adecuado para usarse en línea dentro del texto o en elementos de interfaz compactos. - base: tamaño predeterminado que funciona bien para iconos independientes y casos de uso estándar.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	El significado semántico y el tratamiento de color del componente. - info: contenido informativo o consejos útiles. - success: resultados positivos o estados de éxito. - warning: advertencias importantes sobre posibles problemas. - critical: problemas urgentes o acciones destructivas. - auto: se determina automáticamente según el contexto. - neutral: información general sin una intención específica. - caution: avisos que requieren atención.
type	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	El icono de la biblioteca de iconos que se va a mostrar. Establece un nombre de icono válido para mostrar ese icono. Para ocultar el icono por completo, usa una cadena vacía ''. Para reservar el espacio del icono sin mostrar ninguno, usa 'empty'.

Algunas columnas de tipo de arriba están truncadas para facilitar la lectura; la unión completa está disponible en los tipos de TypeScript generados de la biblioteca (src/lib/generated/types.ts).