Comment by vortico | Hacker News Reader

Comment by vortico | Hacker News Reader

It's nice to see an hour old project pop up on HN.

So essentially this project is:

- Collection of two-color SVG icons

- JS library to allow changing one of the colors programmatically

What about splitting these two features into different projects? There's already a database of millions of monochrome icons at https://thenounproject.com/ and https://icomoon.io/app/. Is there a way to leverage that to somehow produce two-color icons from monochrome icons?

Instead of combining your JS library with your specifically-designed SVGs, why not invent and advertise a technical SVG standard that icon designers can comply with in order for them submit them to your two-color icon curration project that I'm proposing. Then, the JS library would simply implement the ability to change colors assuming the icon follows the SVG standard. To promote openness, note that I'm not proposing a design standard/language to be accepted into a database but a technical standard just for allowing the JS to function. The icons in your own collection should follow your own design language (which looks very professional), but the database should include all design languages.

> 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...

That works too, good idea.

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.

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

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

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

"Is there a way to leverage that to somehow produce two-color icons from monochrome icons?"

I have looked at random SVG icons code from the Noun Project, the answer is no. Or at least not in any systematic way were you could be guaranteed that the division of colors made any sense.

CNN?

It would of course require human interaction for each icon, but it could be done efficiently with custom software for dividing and selecting components for the "emphasis" color. Most icons involve multiple unioned paths, and some icons have entirely separate components, although all at the Noun Project are monochrome.

This process could be done by those wanting to add an icon to their site. The motivation is there, just need a web app to upload an SVG, click some subpaths, and download a "two-color standard-compliant" SVG.

I have been toying with a service for something similar this - not so much that but rather autotracing combined with easy tracing, grouping of areas based on color, stroke, parts of image. The same grouping tools could be used to automatically separate out parts of the nounproject. Extraction of styling into css classes for easier control later.

mainly a developer/designer tool I would expect people to open the svg later and write styles with css. But at that point a tool could be built to handle the easier styling requirements.

Reply on news.ycombinator.com