Open Source SVG Icons Library – Vivid.js | Hacker News Reader

Open Source SVG Icons Library – Vivid.js

webkul.github.io

254 pointsnitishkmrk52 comments

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

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.

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

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.

CNN?

I started disabling Javascript by default a few weeks ago using uMatrix, and I find it puzzling why people would use this? I currently use Font Awesome on my own site, and one task on my backlog is switching out to plain svg files to save on bandwidth (and not require a webfont download). I also have two layout elements that require Javascript I want to try to get rid of as well.

I think we should see more of a movement to get away from Javascript for displaying basic content.

> I find it puzzling why people would use this?

To show icons to the 99.5% of people who use the web with Javascript? Even Font Awesome suggests people go this route today.

This is really interesting, because this changed.

I noticed the default free CDN option was JS when version 5 of FA came out, but now the default is font based:

https://fontawesome.com/get-started

Note the tab order, it's Font | Js | Desktop | Advanced.

It used to start with JS, so I think you may be wrong on this point, even if they "recommend" it in their docs, their defaults argue otherwise.

"Everyone else does it therefore I should too"? Do you also give into peer pressure?

This blog post has a good summary of some of the disadvantages of using icon fonts.

https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/

As far as JavaScript goes, it has been a part of making sites work since the 90's. End users and developers won't ever be moving away from it since there are usually improvements that are gained by using it.

So I guess you don’t edit many documents, book any flights or enjoy your emails automatically refreshing, huh?

I think that last one is the thing I enjoy most of all. I HATE my email automatically refreshing. I'll check it when I'm good and ready!

Have you use uMatrix? By default it does allow first-party Javascript, but I have that disabled. If I got to a website that needs Javascript, I click on uMatrix and enable just the scripts I want. It shows me all the ad and tracking domains as well. I get to see where code is coming from before I allow it to execute.

It does take a little bit longer to setup. You might have to refresh a page 2 or 3 times to get the right rules, but it keeps a lot of excessive Javascript from running in the background. If I disable first-party by default, it also prevents modals, cookie warnings, pay walls and all that other garbage. It reduces my browsers memory footprint and CPU usage as well.

I should have installed uMatrix years ago.

You can easily re-enable JavaScript on selective sites. After all, you don't use hundreds of editors or flight booking sites every day, do you?

Since this looks more like advertising for a project I'll offer my 30 second review.

- Regardless of two-tone scheme chosen the icons look pretty awful

- Many icons made me think what they might mean. The first rule of this type of visual design is: don't make me think.

Keep going. You'll make it eventually.

> - Regardless of two-tone scheme chosen the icons look pretty awful

How is this helpful? It's probably high contrast to show you that you can configure the colors via config [1]. I'm sure you didn't look that far, though.

1 - https://webkul.github.io/vivid/docs.html#customization

> - Regardless of two-tone scheme chosen

It's about the design of the icons, not the colour scheme. They just aren't very good icons (IMHO at least, and presumably that of the previous commenter)

Read what I wrote. I use words for a reason and if you don't read them you will miss important information.

Why do you think I would have taken the time to point out that the icons are ugly regardless of two tone scheme chosen if I hadn't

a) figured out that the color scheme is configurable,

b) given some thought about other ways of coloring the icons (including choosing the same value for both colors, choosing subtle shade, hard contrast etc)

c) decided that the icons are not very good regardless of how you color them?

I'll grant you that I could have been more precise. I could have pointed out that they are both ugly and that the semantics aren't as consistent as something that is designed with care.

Here's another one: https://feathericons.com

Thanks for this link. This lib is awesome.

It looks like they added color support according to docs. Does it work well for anyone in VueJS?

These are so simple & beautiful, thank you!

IonIcons is another good resource for SVG icons. Used them last week in a Qt Frontend and they look great. Open-source and both material and iOS styles:

https://ionicons.com/

Is it permitted to solicit upvotes on product hunt?

If it isn’t, it sure feels like the entirety of Product Hunt is breaking the rules. So, given what I’ve seen: probably no.

Apparently not, but they do not really care. However it is quite distasteful to ask for upvotes before you can even see the icons.

As no one is talking about the design of this icon library, let me be the first.

These icons are 'okay', but none of the examples show sizes less than 48px. The frontpage, uses even larger sizes.

Under 16px width, the icons are difficult to distinguish--even from one another. The color choice of high contrast combinations exacerbates this because it uses zebra striping within the element, rather than using contrast to help distinguish the borders.

If you are planning on using this lib, keep that in mind and use the icons in the largest possible format--perhaps for branding pages. I wouldn't use it for complex application UI, especially not on mobile.

Couldn't having an id per SVG icon cause namespace clashes when inlining?

They don't seem to have an id?

I am in the market for a decent icon set so I am quite specific about what I want in an SVG icon.

Realistically I need a few icons for buttons, account login things, edit buttons and so forth.

I want to have extremely lean and speedy code. This means having a simple inline stylesheet with 'use' being how I put icons in my content. So the account navigation at the top has the icons e.g. 'account' (which is some weird head and shoulders icon type of thing). The forward - next buttons for browsing an image gallery need to be in there as does a popup modal closing 'x'.

The forward button is the same as the back button with it rotated around 180 degrees, the original def being just two lines.

Instead of using some style tags baked into icons I want to set fill and stroke to be 'currentColor'. In this way if I change the link colours then the SVG icons update.

I also don't want width and height in my icons. I want just the viewbox.

My icons are not a semantic element so I also want to put them in the stylesheet with ::before and ::after pseudo elements. Except for in places like the header logo where an inline SVG is legit.

Because I want to 'use' elements I want a master arrow where I can change it and know my changes will be in both the forward and back arrows, or even the up/down wherever arrows.

I also want some space saving social media icons that are not styled but as Facebook/Instagram/Pinterest/Twitter designed them. I want the blue bird not some 'creative designer' effort at improving on the icon. This is for reasons of 'Don't Make Me Think'.

I also want to have titles and descriptions in my icons, in this way I can have useful mouseover text.

Maybe I get my 'service worker' to do the work rather than have the icons embedded as inline on every page. The page can then render nicely on a poor connection even if the icons are missing. This will involve a repaint though as 'svg use' markup might have nothing to 'use'.

A telephone icon would be nice, as would a letter icon for email. In this way I can have a 'call' or 'email' icon in there. The unicode versions of these are no good as the size jumps all over the place.

What I don't want is:

Yet another bit of render blocking javascript

Yet another download

A library of icons including the cruft I am not using.

Icons which need a lot of fettling to be used inline

Icons with style definitions baked into all of them.

Another toolkit to learn.

Another CSS color gig to learn, I want just currentColor.

Paths that are compressed. If I want to compress them then I will do that with defs and use, to keep the original components, e.g. that arrow, as something that makes sense.

So please, if you want to write another SVG icon set, get it to work with 'use', keep the icon content out of the markup, e.g. in the CSS without hacky 'i' tags.

Give me some instructions too about doing it the proper way that works for screen readers as well as those that can read.

Here's my advice from building a couple websites with tons of icons (almost overuse, because I really like using icons on everything).

Just use img tags with Noun Project icons. Use a scripting language of your choice to change the fills and extract the Creative Commons attribution from the XML, and you'll have full customization of the color and size of your icons. There's probably a service out there that does this for you, but a quick search returns no results. (Idea for a project!) But regardless, Noun Project SVG is extremely simple for parsing with a 20-line script.

Don't bother with rotating 180 degrees to generate forward buttons, etc. That's just preoptimization. Just use two different icons. Your company/project/organization will not see the tiniest financial effect of loading tons of unnecessary SVG files vs. optimizing them.

Some remarks:

> The forward button is the same as the back button with it rotated around 180 degrees, the original def being just two lines.

A sane minimal arrow button will be just one short path; referring to the other and rotating it 180 degrees can easily be more verbose and complex.

> I also want to put them in the stylesheet with ::before and ::after pseudo elements.

This is incompatible with several of your other goals: currentColor, <use>, <title>, <description>.

> I also don't want width and height in my icons. I want just the viewbox.

In some contexts there are distinct advantages to specifying width and height; most notably, in inline SVG, before the stylesheets which define the size have loaded, they will tend to fill the available width instead, leading to massive icons briefly, or if the stylesheets simply fail to load (or are blocked).

> I also want to have titles and descriptions in my icons, in this way I can have useful mouseover text.

Better still, have actual text beside the icon. Text is really good. Icons and text is commonly really good. (In that case, you just want aria-hidden=true on the icon.) Icons with no text are generally just a bad idea.

> Maybe I get my 'service worker' to do the work rather than have the icons embedded as inline on every page. […]

You have bamboozled me with this one.

Does this work?

https://diafygi.github.io/svg-font-to-svg-sprite-converter/e...

very cool. I didn't know about that. thanks.

White on yellow is bad contrast.

Huge fan of Webkul. Really liked earlier open source project, Coolhue!

awesome. I always love free and malleable icons :D

(also, 'with a blaze' is slightly awkward, i think.)

Reply on news.ycombinator.com