[panstromek]

I like to use sprite files for conditional styling of icons, because using separate file for each state creates a visible delay on state changes, which doesn't look great.

You can make them with <defs> and <use> tags pretty easily if you understand svg a bit. I usually bundle two-state icon into a single svg file, and then use `object-position: left/right` property on the <img> tag to switch between the variants. You can also combine this with some simple css animations.

[mrled]

Oh man, you're right, I didn't realize they worked this way. This basically means there is no compromise at all, I'm going to update the post. Thanks!

[panstromek]

Well, there's still a compromise to be fair. It's defintely more work to manage these sprites and it's especially annoying when there's more than one state. I think it's possible to write some tool to automate it, but I haven't found one.

[douglee650]

There are preprocessors that will do this. Conceptually, we would:

  include sprite-1.snippet
  include sprite-2.snippet

and it would write the defs into the page. Then later in the page, `<use>` the defs you included.

[WhyNotHugo]

Any examples of further material on this? Sounds pretty convenient, but I'm not familiar with <def> or <use> (or `object-position`, for that matter).

[jarek-foksa]

Boxy SVG editor comes with built-in support for creation and editing of SVG icon sprites.

You can play with a sample SVG sprite on https://boxy-svg.com/#demo-symbols. Individual icons are shown under "Defs Panel -> Symbols". To edit an icon just double-click its thumbnail. To make part of an icon recolorable, select that part and then click "Fill Panel -> Paint -> Type -> Inherit".

You could then create separate symbols which contain a recolored instance of the original symbol. The underlying markup will look something like this:

  <?xml version="1.0" encoding="utf-8"?>
  <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <symbol id="recolorable" viewBox="0 0 100 100">
        <rect width="100" height="100" style="fill: inherit;"/>
      </symbol>
      <symbol id="blue" viewBox="0 0 100 100">
        <use width="100" height="100" style="fill: blue;" xlink:href="#recolorable"/>
      </symbol>
      <symbol id="green" viewBox="0 0 100 100">
        <use width="100" height="100" style="fill: green;" xlink:href="#recolorable"/>
      </symbol>
    </defs>
  </svg>

Finally, use a fragment identifier to show a specific icon in HTML:

   <img src="sprite.svg#green">

[panstromek]

hmm, I didn't know you can use fragment identifiers in src attribute, that changes the game quite a bit. I remember looking for stuff like that, though. Not sure why I didn't anything, because it seems like it's been supported for quite a while. I only found the reuse inside svg in the same parent html document.

[jarek-foksa]

Fragment identifiers in "src" attribute seem to be supported by all modern browsers, but now I realized my example was wrong - you can reference <view> elements, but not <symbol> elements directly.

To make it work you would have to either replace <img src="sprite.svg#green"/> with <svg ...><use href="sprite.svg#green"></use></svg> or add views to the sprite file:

  <?xml version="1.0" encoding="utf-8"?>
  <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <symbol id="recolorable" viewBox="0 0 100 100">
        <rect width="100" height="100" style="fill: inherit;"/>
      </symbol>
      <view id="blue"  viewBox="  0 0 100 100"></view>
      <view id="green" viewBox="100 0 100 100"></view>
    </defs>

    <use x="0"   y="0" width="100" height="100" style="fill: blue;"  xlink:href="#recolorable"/>
    <use x="100" y="0" width="100" height="100" style="fill: green;" xlink:href="#recolorable"/>
  </svg>

[prutya]

Hey, I wrote a small blog post on <defs> and <use> and how to optimize icons using them: https://www.prudkohliad.com/articles/reuse-svg-icons-2023-08...

[panstromek]

cool, that one is about doing that inside html, but I usually do it in external SVG files.

[prutya]

That makes a lot of sense. If you use some client-side routing (e.g. Next.js), you might be fine, because the page does not reload during navigation. But if you don't, every HTML page will contain all the SVGs increasing the HTML size unnecessarily.

P.S. I actually went ahead and changed the implementation to a separate file on my website after I saw your comment :D

[panstromek]

It's something like this (I just quickly took this from my project, not sure if it works in this form now). This one uses the defs/use trick to reuse a path, but you can also just put two different svgs next to each other and not use the defs/use at all.

The icon:

  <!--   the icon width is 2x wider, to accommodate both 26x26 variants  -->
  
  <svg xmlns="http://www.w3.org/2000/svg" width="52" height="26">
    <defs>
      <!-- here's the icon defined, you can basically put anything here and
           mark it with an id (you can even use another svg) -->
      <path id="icon" path="..."/>
    </defs>
  
    <!-- first variant with no fill -->
    <use stroke="#fff" href="#icon"/>
  
    <!-- second variant with fill, shifted by 26 (dimensions of the icon) -->
    <use x="26" fill="#00ACA0" stroke="#00ACA0" href="#a"/>
  </svg>
  

HTML:

    <!-- make sure you use dimensions of the single variant -->
  <img src="icon.svg" width="26" height="26" class="hover-icon">
  

CSS:

  .hover-icon {
    /* make sure that only first block of the image is visible */
    object-fit: cover;
    object-position: left;
  }
  .hover-icon:hover {
    object-position: right;
  }

[myfonj]

Sandbox (with fixes): https://codesandbox.io/p/sandbox/pan-stromek-svg-object-posi...

Btw, for such simple re-colouring I'd probably rather used CSS hue shift filter or similar effect, and kept the SVG "dumb". But for having different shapes or geometric properties this approach is indeed nifty.

[panstromek]

Yes, I do that, too. The benefit of using the sprite system is that it's pretty general, so once you have some CSS for it, it's easy to keep adding new icons. CSS filters are usually more special for each case, but I use them too (mostly for brightness and greyscale things that are repeated on multiple places, e.g. tabs or disabled state).

[danielvaughn]

You might want to check out old tech articles, as sprites were a very common approach from roughly 2005-2012-ish. Lots of interesting little techniques.