Hacker News Reader

Comment by spankalee | Hacker News Reader

> advertise a technical SVG standard that icon designers can comply with

> Then, the JS library would simply implement the ability to change colors assuming the icon follows the SVG standard

No need for JS for styling: just use CSS custom variables. The only thing that needs to be standardized are the two variable names.

Just define an icon like this:

icons.svg

    <svg xmlns="http://www.w3.org/2000/svg">
      <symbol id="calculator" viewBox="0 0 48 48">
        <path class="icon-primary" style="fill: var(--icon-primary-color, black)" d="..."></path>
        <path class="icon-accent" style="fill: var(--icon-accent-color, gray)" d="..."></path>
      </symbol>  
    </svg>

Then use it like this:

    <style>
      .icon {
        --icon-primary-color: DarkBlue;
        --icon-accent-color: DeepSkyBlue;
      }
    </style>
    <svg class="icon"><use xlink:href="icons.svg#calculator"></use></svg>

See a demo here: https://glitch.com/edit/#!/piquant-ladybug?path=index.html:1...

View on HN

Or just:

  .icon-primary { fill: #ff6600; }

for browsers without variable support.

The icon might have parts where the stroke should be the primary color. Variables abstract away the details.

They also inherit through shadow roots, while selectors don't.

You also get up to two dynamically stylable colors in SVGs without using CSS variables, with wider browser support. If you remove the 'fill' style entirely from the first path in your example, and set the second path's fill to 'currentColor', you can then adjust those path colors such as:

  .icon {
    fill: DarkBlue;
    color: DeepSkyBlue;
  }

currentColor is neat, but it means that you can use strokes for the other color, and this technique doesn't scale to more than two colors.

CSS custom variable support is very good: https://caniuse.com/#feat=css-variables

If you can import external symbols this way, you're already not using IE, and so can use CSS custom variables.

There's actually a small polyfill for external SVG use that works with IE. Think I used this one:

https://github.com/Keyamoon/svgxuse

I think most people would like to go this route but IE 11 support holds them back.

Isn't all of IE at something like 3% market share these days? If so, is it worth holding back web development for such a small user base?

Depends on your market, it appears for me, most of Europe is Safari / Chrome, but Japan is almost entirely IE 11, China is mix of IE / 360 Browser. Sometimes it's not easy to not care.

Do you have a source for that (DeviceAtlas or similar)?

This is just observation based on stats from Google Analytics at work. I hope you're not assuming that my statement is the overall usage of browsers by country.

Depends on the size of the company and the userbase.

For us IE11 alone is over 3 million users a month. The size of a small country.

I think for icons, lack of IE support is acceptable because the fallback is simply not displaying icons.

Yet another reason sites should drop IE support as soon as the numbers let them.

That works too, good idea.

Reply on news.ycombinator.com