Svg Spriter
The purpose of this web app is to provide a way to create sprite from a list of svg files.
Prerequisites
Getting Started
Download the package, go to the installer folder then under your os folder*, launcher the installer then the run files.
Only windows installer are available yet
In case it went wrong or other os:
The installer will go to your project root folder and run npm install. Then, it will go to the child folder [root]\public\generator\grunt\sprite and run npm install.
Finally, change the NODE_ENV value to production, and enter the following command:
node bin\www
The run file will launch the node process, keep it running in order to let the web site up and running.
By default, the web site will be accessible by the following url: http://localhost:3000 To change that, go to the app file or setup the PORT environment variable.
How to use
SVG Spriter Website
Upload the svg files you want to sprite, then click on generate
It will upload the files under the folder: [root]\public\generator\svgs\session_guid\
And generate the content under a temporary folder: [root]\public\generator\releases\sprite_[timestamp]\
-
Features:
- Switch to black/white background
- New Session: will erase all current uploaded svg files and create a new spriting session.
-
Parameters:
- prefix css/less class name
- in between svg padding
The result
A zip file will be generated, with the following content:
zip
+--style
| +--less
| | +--icons.less
| +--svg
| | +--icons.svg
| +--icons.css
+--icons.html
Description:
-
icons.html: An HTML sprite preview, to see the sprite result and how it could be used (scaling, etc)
-
style
- icons.css: stylesheet file that consumes the svg sprite (released from less file)
- less
- icons.less: less file that consumes the svg sprite
- svg
icons.svg: The actual svg sprite
External tools
This aggregate software is using the following community grunt library: