SIcon <s-icon>

Affiche une icône du jeu d'icônes Polaris à partir de son nom. SIcon est le wrapper Vue 3 typé du web component <s-icon> de Shopify Polaris.

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

Bonnes pratiques

• Utilisez les icônes pour informer, pas pour décorer. Une icône doit expliquer ce que fait une action ou montrer un état, comme une icône de suppression sur une action de suppression ou une coche pour un élément terminé. N'ajoutez pas d'icônes uniquement pour l'esthétique.
• Soyez cohérent. Une fois qu'une icône représente une action ou un concept, conservez ce sens dans toute votre app. Si edit signifie modifier à un endroit, utilisez-la pour la modification partout.
• Associez les icônes à du texte lorsque c'est possible. Seules, même les icônes familières peuvent être interprétées de plusieurs façons. N'utilisez une icône seule que lorsque la place manque, comme pour un bouton à icône seule doté d'un accessibilityLabel.
• Choisissez des icônes largement reconnues. Privilégiez les icônes au sens bien établi, comme search, delete et plus. Si une icône nécessite une explication, choisissez-en une autre.
• Laissez tone porter le sens. Utilisez tone="critical" pour les actions destructives, tone="success" pour les états positifs et tone="warning" pour inciter à la prudence. Les tons doivent communiquer quelque chose, pas décorer.

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

Consultez les bonnes pratiques de Shopify pour <s-icon> (en anglais) pour l'ensemble des recommandations.

Exemple

<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"	Le niveau d'emphase de couleur qui contrôle l'intensité visuelle. - base : couleur principale pour le corps de texte, les éléments d'interface standard et le contenu général, avec une bonne lisibilité. - subdued : couleur atténuée pour le texte secondaire, les libellés d'appui et les éléments d'interface moins importants.
interestFor	string	ID d'un composant qui doit réagir à l'intérêt (p. ex. survol et focus) porté à ce composant.
size	"base" | "small"	La taille de l'icône. - small : icône plus petite, adaptée à un usage inline dans du texte ou dans des éléments d'interface compacts. - base : taille par défaut, adaptée aux icônes autonomes et aux usages standard.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	La signification sémantique et le traitement des couleurs du composant. - info : contenu informatif ou conseils utiles. - success : résultats positifs ou états de réussite. - warning : avertissements importants sur des problèmes potentiels. - critical : problèmes urgents ou actions destructrices. - auto : déterminé automatiquement selon le contexte. - neutral : information générale sans intention particulière. - caution : avis nécessitant de l'attention.
type	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	L'icône de la bibliothèque d'icônes à afficher. Indiquez un nom d'icône valide pour afficher cette icône. Pour masquer complètement l'icône, utilisez une chaîne vide ''. Pour réserver l'espace de l'icône sans en afficher une, utilisez 'empty'.

Certaines colonnes de type ci-dessus sont tronquées pour plus de lisibilité ; l'union complète est disponible dans les types TypeScript générés de la bibliothèque (src/lib/generated/types.ts).