Icon Icône
Introduction
Un wrapper léger et conscient de la taille et de la couleur pour les formes SVG. Il applique des dimensions de délimitation cohérentes, hérite de currentcolor afin que les formes correspondent automatiquement aux thèmes de texte adjacents sans compiler des packages d'icônes externes gonflés, et prend en charge à la fois le masquage décoratif et l'étiquetage explicite pour les lecteurs d'écran.
Le composant Icon est entièrement intégré en tant que bloc icon dans le Page Builder, permettant aux gestionnaires Sveltia CMS d'injecter des chemins vectoriels personnalisés, de personnaliser les viewports et de modifier les paramètres d'échelle directement dans les mises en page.
Utilisation
Ces configurations représentent exactement comment les éléments de bloc du constructeur de pages sont construits.
1. Indicateur de Flèche Minimal (Taille Moyenne)
Fournit une flèche vectorielle standardisée, utile pour aligner à côté des en-têtes de carte, des listes de liens ou des boutons de formulaire.
{
"type": "icon",
"svg": "<path d=\"M5 12h14M12 5l7 7-7 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />",
"viewBox": "0 0 24 24",
"fill": "none",
"stroke": "currentColor",
"size": "md"
}
2. Marqueur de Catégorie de Fonction Accentué (Grande Échelle)
Rend un icône graphique plus grande représentant une fonction, un avantage de plan ou un bloc de catégorie marketing.
{
"type": "icon",
"svg": "<path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />",
"viewBox": "0 0 24 24",
"fill": "none",
"stroke": "currentColor",
"size": "lg"
}
Props
| Propriété | Type de Champ CMS | Par défaut | Description / Options Prises en Charge |
|---|---|---|---|
Balisage de Forme Vectorielle (svg) | string | - | Balises de balisage SVG vectoriel interne brut (ex. <path d="..." />, <circle cx="..." />). |
Boîte Englobante du Viewport (viewBox) | string | "0 0 24 24" | Indique au navigateur la mise à l'échelle des coordonnées. Correspond généralement aux conceptions SVG sources. |
Taille d'Échelle (size) | select | "md" | Échelle de dimensions visuelles standardisées. • Options : "2xs", "xs", "sm", "md", "lg", "xl". |
Règle de Remplissage (fill) | string | "currentColor" | Règle de remplissage sous-jacente. Définir sur "none" si vous utilisez des contours de trait. |
Couleur de Trait (stroke) | string | - | Couleur du contour de bordure. Définir sur "currentColor" pour hériter du thème de couleur de police adjacent. |
Libellé de Description Aria (aria-label) | string | - | Libellé pour lecteurs d'écran. S'il est laissé vide, l'icône est automatiquement masquée des lecteurs d'écran (aria-hidden="true"). |
Notes d'Accessibilité et d'Optimisation SVG
- Aria-Hidden par Défaut : Comme les icônes sont couramment utilisées comme mises en évidence visuelles décoratives (telles que des icônes à puces à côté d'une liste de texte), le composant applique automatiquement
aria-hidden="true"si aucun textearia-labeldescriptif n'est fourni. - Fusion SVG Intelligente (
asChild) : Pour les mises en page personnalisées des développeurs, définirasChild(par défaut true) fusionne automatiquement les noms de classe calculés du composant et les paramètres de mise à l'échelle directement sur un seul élément<svg>enfant écrit manuellement. Cela élimine le rendu d'éléments wrapper redondants dans le code source HTML de sortie. - Héritage de Couleur : Étant donné que la recette CSS sous-jacente définit
color: currentcolor, les chemins vectoriels utilisantstroke="currentColor"oufill="currentColor"héritent de manière transparente des schémas de couleur typographique parents.