
Open Source SVG Icons Library – Vivid.js - nitishkmrk
https://webkul.github.io/vivid/
======
vortico
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.

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

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

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

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

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

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

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

~~~
soperj
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!

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

~~~
olingern
> \- 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](https://webkul.github.io/vivid/docs.html#customization)

~~~
jordanwallwork
> \- 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)

------
bullen
Here's another one: [https://feathericons.com](https://feathericons.com)

~~~
fredguth
Thanks for this link. This lib is awesome.

------
montalbano
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/](https://ionicons.com/)

------
oooooof
Is it permitted to solicit upvotes on product hunt?

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

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

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

~~~
invalidusernam3
They don't seem to have an id?

<i data-vi="user"></i>

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

~~~
diafygi
Does this work?

[https://diafygi.github.io/svg-font-to-svg-sprite-
converter/e...](https://diafygi.github.io/svg-font-to-svg-sprite-
converter/examples/)

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

------
aw3c2
White on yellow is bad contrast.

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

------
ixtli
awesome. I always love free and malleable icons :D

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

