5 ms·

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

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/ https://thenounproject.com/ and https://icomoon.io/app/ 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.

bryanrasmussen 8y ago
"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.
- gm-conspiracy 8y ago
  CNN?
- vortico 8y ago
  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.
  - bryanrasmussen 8y ago
    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.
spankalee 8y ago
> 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:0 https://glitch.com/edit/#!/piquant-ladybug?path=index.html:1...
- vortico 8y ago
  That works too, good idea.
- plorntus 8y ago
  I think most people would like to go this route but IE 11 support holds them back.
  - mrmondo 8y ago
    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?
    - philliphaydon 8y ago
      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.
      - 8y ago

bryanrasmussen 8y ago

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

gm-conspiracy 8y ago
CNN?
vortico 8y ago
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.
- bryanrasmussen 8y ago
  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.

spankalee 8y ago

> 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:0 https://glitch.com/edit/#!/piquant-ladybug?path=index.html:1...

vortico 8y ago
That works too, good idea.
plorntus 8y ago
I think most people would like to go this route but IE 11 support holds them back.
- mrmondo 8y ago
  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?
  - philliphaydon 8y ago
    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.
    - 8y ago