Icons created by Sergey Demushkin from the Noun Project
This tool is designed for SVG icon sprites, that you created by stacking all icons over each other in order to use them in your html with the <use> tag for example. I found it hard to control how your icons might look on the website, when opening a SVG file directly in the browser, as browsers tend to open them in 100% width and height and sometimes you might need to change the white background in order to see transparency or white icons.
SpriteSpreadr will give you a structured overview by displaying your icons in a reasonable grid next to each other in their original size with the id names underneath them and offers you a possibility to change the background color in the browser.
For this it is important, that you give your icons id names. You can do this in Adobe Illustrator by naming your layers. This will turn out to be id attributes automatically with the export to SVG.
- Put all your SVG icons in groups or in 1 compound path per icon
- Place them all over each other.
- Make sure, they're all visible
- Name each icon group or icon compound path
- Export it to SVG
- Upload the SVG on SpriteSpreadr
- See how they will look
- Edit the background color, when needed
Please note that as for now (November 2015) the "Reload File" functionality and the background color chooser will only work in Chrome and Firefox.
Please note that css, js and html markdown are all merged into the html. This is not meant to be beautiful but could come in handy, as you could easily pass the html on or download it and open it offline on your browser without any hassle or additional files. The image folder contains the images of the help layer.
- Put your SVG code inline at the top of your <body> tag.
- Insert a <defs> tag inside the <svg> thus wrapping all contents with it
<svg>
<defs>
<g id="icon-id1">
<!-- paths, groups, circles, rects etc. -->
<g>
<g id="icon-id2">
<!-- paths, groups, circles, rects etc. -->
<g>
</defs>
</svg>- Reference the icons you need to use by ID in the <use> tag inside a <svg> tag : <use xlink:href="#id">:
<svg viewBox="0 0 32 32" class="icon-class">
<use xlink:href="#icon-id1"></use>
</svg>Find more about this on css tricks