Recherche : [icône] - Antichesse (o ^ω^ o)

Pourquoi Apple galère autant avec le pourcentage de batterie des iPhone ? - Numerama - Le Hollandais Volant

Mais Timo, non 🤭 Les dégradés sur les polices de caractères existent depuis au moins MS Paint et Corel Image (c'est-à-dire pas loin des 25 ans).

Toi qui écris plein de tips sur les technos web voici un exemple en CSS tiré de Stack Overflow : https://stackoverflow.com/q/37831837

Bref aucun problème technique, sûrement un règle de design Apple qui fait qu'en interne, Apple ne veut pas.

apple · batterie · design · icône · shaarliste

Sun Aug 14 14:56:55 2022 * · permalien

·

https://lehollandaisvolant.net/?mode=links&id=20220814104742

How to quickly Create and Use SVG Sprites

Comment créer et utiliser des sprites SVG (c'est-à-dire fusionner plusieurs SVG en un seul fichier). Pour résumer...

1) Créer un fichier SVG vide

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">
...
</svg>

2) Dans une balise <symbol> y migrer le contenu du SVG à intégrer au sprite sans oublier d'y reporter la viewBox en attribut de la balise <symbol>.

Par exemple le SVG suivant :

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 95">
  <defs>
    <style>.cls-1{fill:#00dd7e;}</style>
  </defs>
  <title>8 Point Star</title>
  <path class="cls-1" d="M83.59,63.91,97.5,50,83.59,36.09V16.41H63.91L50,2.5,36.09,16.41H16.41V36.09L2.5,50,16.41,63.91V83.59H36.09L50,97.5,63.91,83.59H83.59Z" transform="translate(-2.5 -2.5)"/>
</svg>

Sera intégré comme ceci :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon-star" viewBox="0 0 95 95">
    <path class="cls-1" d="M83.59,63.91,97.5,50,83.59,36.09V16.41H63.91L50,2.5,36.09,16.41H16.41V36.09L2.5,50,16.41,63.91V83.59H36.09L50,97.5,63.91,83.59H83.59Z" transform="translate(-2.5 -2.5)"/>
</symbol>
</svg>

3) Dans le même fichier, ajouter autant de balises <symbol> qu'il y a de SVG à intégrer au sprite **en leur donnant des ID différents

4) Pour utiliser le SVG il suffit d'écrire ceci dans votre page HTML

<svg class="icon icon--red">
  <use xlink:href="/path/to/sprite.svg#icon-star"></use>
</svg>

Le top du top c'est que le SVG sera mis en cache pas le navigateur, ce qui est une solution idéale pour un set d'icônes à la résolution accroissable (nouveau mot).

design · icône · sprite · svg · tuto

Sat Jul 9 23:10:26 2022 * · permalien

·

https://w3bits.com/svg-sprites/

Optimize Font Awesome to ridiculously low size of 10KB! | Webjeda - Warrior du Dimanche

Merci @Bronco. C'est marrant parce que j'en parlais avec @Lenny ce midi (je suis tombée sur Fontello par hasard ce matin). En fait, j'aimerai une opération qui soit 100 % utilisable dans une PIC (ie. Plateforme d'Intégration Continue pour ceux qui ne connaîtraient pas l'acronyme).

L'idée serait de pouvoir récupérer l'intégralité des fonts en local via une commande Yarn/NPM puis de produire le bundle avec juste ce qu'il faut, au moment du build, en ne déclarant que celles utilisées (dans une tâche Gulp par exemple).

Ce qui me gène dans Fontello, c'est qu'il faut cliquer, et donc qu'un humain doive le faire au moins une fois, puis à chaque mise à jour du set d'icônes ; augmenter ainsi la probabilité d'un oubli d'une icône précieuse au fil du temps...

La meilleure option reste de déclarer l'ensemble des icônes souhaitées dans une conf et de laisser le build produire l'archive qui va bien. Si je trouve une solution, je la posterai.