Icônes

Chaque icône Feitio, dessinée à la main. Recherchez par nom, en portugais ou en anglais, et touchez pour copier le code.

Toutes les icônes

• Task: copier le codefeitio-taskCopied
• Calendar: copier le codefeitio-calendarCopied
• Search: copier le codefeitio-searchCopied
• Settings: copier le codefeitio-slidersCopied
• Create: copier le codefeitio-plusCopied
• Done: copier le codefeitio-checkCopied
• Close: copier le codefeitio-closeCopied
• Warning: copier le codefeitio-warnCopied
• Info: copier le codefeitio-infoCopied
• Open: copier le codefeitio-chevron-downCopied
• Next: copier le codefeitio-chevron-rightCopied
• Menu: copier le codefeitio-menuCopied

Aucune icône avec ce nom. Besoin d'en créer une nouvelle ? Voyez comment demander, ci-dessous.

Touchez une icône pour copier son code.

Comment les utiliser

Toutes les icônes vivent dans un seul fichier, icons/sprite.svg. Chaque icône est appelée par nom, hérite de la couleur du texte environnant et de la taille de police.

<button type="button" class="feitio-button">
  <svg class="feitio-icon" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-plus"/></svg>
  Novo agendamento
</button>

• Avec un mot à côté, l'icône obtient aria-hidden="true" : le mot explique.
• Par lui-même, son conteneur porte le nom : aria-label sur le bouton ou le lien.
• La taille provient du texte (1em) ; pour une autre taille, modifiez la taille de police environnante ou la inline-size.

Un nouvel icône

Un nouvel icône est dessinée, en suivant les règles de Iconographie et illustration : deux traits à chaque jointure, penchés, dans la couleur du texte. Le fichier va dans icons/<name>.svg, et bun run build reconstruit le sprite ; les tests de Feitio vérifient les règles.