[gaddafirusli]

Hello !

I made this tool because I feel like there should be a much simpler way to quickly generate/customise common SVG icons for my project, especially while doing bunch of front-end development. You no longer have to open any design tool just to resize or change stroke style/color. You'll be able to do that and copy the resulting SVG code directly from this tool!

Let me know what do you think about this project

Most of the icons in this project are optimised version of feathericons.com by Cole Bemis (huge fan )

[megous]

You can customize whatever you like by using var(--color, #000) in SVG and --color: #123 in CSS. No need for any tools. :)

[myfonj]

Or just inherit colour that was set for text.

    path { stroke: currentColor; }

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...

[jakelazaroff]

Only if you're including the markup inline as opposed to as an image, which may or may not be desirable!

[megous]

Yes, you need at least xlink to an external SVG file. But that's pretty close to <img>. It's just one more element.

[some1else]

Hey there's definitely a need for something like this. But the quantized stroke width is too limiting to make this icon set widely applicable. The ability to finely tune the icon weights, in a similar way like the weight of a variable webfont, would be truly game-changing. I'm not particularly enthusiastic about outline icons, as I feel like they go against some gestalt principles, but being able to blend shapes in with the rest of the art regardless of scale would be really powerful.

[Theodores]

Brilliant. I am the most picky person ever when it comes to SVG and I detest the rubbish that gets churned out of Illustrator. The great thing about your tool is that it enables you to learn a thing or two, there is a great amount of SVG vocabulary used. My test is to see if an icon such as the 'play' icon uses a circle or a path for the circle.

Another thing that I find annoying about designer made SVGs is that the circle will not only be a path but the points on the path will be in 'NASA numbers', i.e. to nine decimal places. It is refreshing to find icons on a sensible grid and going for integers where possible.

Download size is one thing, however, I also think SVG icons should be a bit more literal, with things like mask and use brought into play. So the 'fast forward' icon might be lighter defined as two polygons, but the polygons are the same so the define one triangle and re-use it for the second makes more sense in a literal way even though the code to bring in the namespace for use might actually make the download size of the icon larger.

In this vein the other thing I like to see is a viewbox that has the origin in the middle. In that way a circle just has to have a radius to be centred and an arrow can use another arrow and be rotated by 180 degrees.

If you put this together then you can have a symbol set that has eight different arrows in it 'using' the base arrow and any changes to the base arrow get automagically updated to the others.

Another download option that would be useful to me would be a CSS variable version of each icon. This technique doesn't work in Edge but has its advantages in that you can have pseudo elements for things like 'external link' where the background to the pseudo element is an SVG in a CSS variable. The CSS variable needs some url-data-xml-type-svg syntax and any '#' characters have to be escaped out as %23.

By taking this approach the SVGs can be in the stylesheet and therefore downloaded 'for free'. If done in white they can also be colorised to anything including black in the CSS for the pseudo element. Lea Verou has done a talk or two on this SVG in CSS approach and a tool to get readymades would help make this method more acceptable to people who are still stuffing icons in fonts.

Anyway, thanks again for sharing your beautiful site, there is lots to learn from the icons you have there!

[ochronus]

Cool stuff! Thanks for making it and sharing :)

[rvwaveren]

Very cool! Thanks!