How I Made an Icon System Out of CSS Custom Properties

Create CSS custom attributes into icon system

SVG is undoubtedly the best format for website icons. It provides clear icons regardless of screen pixel density; you can change the hover style of SVG, and you can even animate icons using CSS or JavaScript.

There are many ways to include SVG in a web page, and each technology has its own advantages and disadvantages. I've been using the Sass function to import icons directly in my CSS over the past few years, avoiding messing with my HTML tags.

I have a Sass list with all the icon source code. Each icon is then encoded as a data URI using the Sass function and stored in a custom property in the root of the page.

In short

What I provide here is a Sass function that creates an SVG icon library directly in your CSS.

SVG source code is compiled by the Sass function, which encodes it as a data URI, and then stores the icon in a CSS custom property. You can then use any icon anywhere in your CSS just like you would with an external image.

This is an example extracted directly from my personal website code:

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

Demo

Sass structure

<code>/* All icon source code */
$svg-icons: (
  burger: '<svg data-line="" scss="" viewbox="0...'
);

/* Sass function encoding icon */
@function svg($name) {
  @return url('data:image/svg xml, #{$encodedSVG} ');
}

/* Store each icon in a custom property */
:root {
  @each $name, $code in $svg-icons {
    --svg-#{$name}: #{svg($name)};
  }
}

/* Add hamburger icon in my button */
.menu::after {
  content: var(--svg-burger);
}



<p>This technology has both advantages and disadvantages, so be sure to consider these factors before implementing this solution in your project: </p>


<h4 id="Pros">Pros</h4>


<ul>
<li>No HTTP request is required for SVG files. </li>
<li>All icons are stored in one location. </li>
<li> If you need to update the icon, you don't need to traverse each HTML template file. </li>
<li> Icons are cached with CSS. </li>
<li>You can manually edit the source code of the icon. </li>
<li> It won't pollute your HTML by adding extra tags. </li>
<li>You can still use CSS to change the color or some aspects of the icon. </li>
</ul>


<h4 id="Disadvantages">Disadvantages</h4>


<ul>
<li>You cannot use CSS to add animation or update specific parts of SVG. </li>
<li>The more icons, the larger the compiled CSS file. </li>
</ul>



<p>I mainly use this technique for icons, not logos or illustrations. The encoded SVG is always larger than its original file, so I still use <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>

The above is the detailed content of How I Made an Icon System Out of CSS Custom Properties. For more information, please follow other related articles on the PHP Chinese website!