Comment j'ai fabriqué un système d'icônes à partir de propriétés personnalisées CSS

Créer des attributs personnalisés CSS dans le système d'icônes

SVG est sans aucun doute le meilleur format pour les icônes de site Web. Il fournit des icônes claires quelle que soit la densité des pixels d'écran;

Il existe de nombreuses façons d'inclure SVG dans une page Web, et chaque technologie a ses propres avantages et inconvénients. J'ai utilisé la fonction SASS pour importer des icônes directement dans mon CSS au cours des dernières années, en évitant de jouer avec mes balises HTML.

J'ai une liste SASS avec tout le code source de l'icône. Chaque icône est ensuite codée en tant que URI de données à l'aide de la fonction SASS et stockée dans une propriété personnalisée à la racine de la page.

en bref

Ce que je fournis ici est une fonction SASS qui crée une bibliothèque d'icônes SVG directement dans votre CSS.

Le code source SVG est compilé par la fonction SASS, qui les code en tant que URI de données, puis stocke l'icône dans une propriété CSS personnalisée. Vous pouvez ensuite utiliser n'importe quelle icône n'importe où dans votre CSS comme vous le feriez avec une image externe.

Ceci est un exemple extrait directement de mon code de site Web personnel:

<code>.c-filters__summary h2:after {
  content: var(--svg-down-arrow);
  position: relative;
  top: 2px;
  margin-left: auto;
  animation: closeSummary .25s ease-out;
}</code>

démo

Structure sass

 <code> / * Tous les icônes Code source * /
$ svg-icons: (
  burger: '& lt; svg data-line = "" scss = "" Viewbox = "0 ...'
));

/ * Icône de codage de fonction sass * /
@Function svg ($ name) {
  @return url ('data: image / svg xml, # {$ encodedSvg}');
}

/ * Stockez chaque icône dans une propriété personnalisée * /
:racine {
  @each $ name, $ code dans $ svg-icons {
    --svg - # {$ name}: # {svg ($ name)};
  }
}

/ * Ajouter l'icône du hamburger dans mon bouton * /
.Menu :: après {
  Contenu: var (- svg-burger);
}



<p> Cette technologie présente à la fois des avantages et des inconvénients, alors assurez-vous de considérer ces facteurs avant de mettre en œuvre cette solution dans votre projet: </p>


<h4> pros </h4>


<ul> <li> Aucune demande HTTP n'est requise pour les fichiers SVG. </li> <li> Toutes les icônes sont stockées en un seul endroit. </li> <li> Si vous avez besoin de mettre à jour l'icône, vous n'avez pas besoin de traverser chaque fichier de modèle HTML. Les icônes </li> <li> sont mises en cache avec CSS. </li> <li> Vous pouvez modifier manuellement le code source de l'icône. </li> <li> Il ne polluera pas votre HTML en ajoutant des balises supplémentaires. </li> <li> Vous pouvez toujours utiliser CSS pour modifier la couleur ou certains aspects de l'icône. </li> </ul>


<h4> Inconvénients </h4>


<ul> <li> Vous ne pouvez pas utiliser CSS pour ajouter une animation ou mettre à jour des parties spécifiques de SVG. </li> <li> Plus il y a d'icônes, plus le fichier CSS compilé est grand. </li> </ul>



<p> J'utilise principalement cette technique pour les icônes, pas les logos ou les illustrations. Le SVG codé est toujours plus grand que son fichier d'origine, donc j'utilise toujours <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157496146935.jpg" class="lazy" alt="How I Made an Icon System Out of CSS Custom Properties "> </p></code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!