The purpose of this web app is to provide a way to create sprite from a list of svg files.
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
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.
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
A zip file will be generated, with the following content:
zip
+--style
| +--less
| | +--icons.less
| +--svg
| | +--icons.svg
| +--icons.css
+--icons.html
-
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
This aggregate software is using the following community grunt library: