Build a client-side Grunticon web app

[scottjehl]

It'd be cool if we could drop a folder of svgs on the browser and get a zip file of typical Grunticon output in return. Maybe it could be built without a server using browser tech alone, I'm not sure...

• drag and drop the folder of SVGs onto the browser
• create the first css file based on the escaped contents of the svg
• use canvas's data uri functions to create the png fallback CSS and images from the svg source files
• zip the generated output files using something like https://github.com/Stuk/jszip
• offer a data uri of the zip for download

Anyone want to help build this thing?

Repo is here for PRs :)

https://github.com/filamentgroup/grunticon-app

[Aetherpoint]

Would love to spend time on the UI / typography if it helps!

[scottjehl]

yeah awesome!

[sherred]

I'll put my thinking cap on, so I guess you can count that as a yes I'll try and help

[dbushell]

With a node web server it'd be simple but I like the idea of using browser tech alone!

The steps would involve:

• use the File API to upload and read SVG data
• render the SVG to a Canvas (e.g. canvag)
• render the Canvas to a PNG (canvas.toDataURL?)
• create a <a href="[data]">

for multiple files would you be able to generate a ZIP'd folder with JavaScript?

[scottjehl]

If anyone is interested, the repo is here https://github.com/filamentgroup/grunticon-app

[scottjehl]

Thanks, @dbushell - I'm not sure if it's possible, but the portability would be nice. A node app would be a fine fallback if not!

[dbushell]

@scottjehl I just tested the "canvag" in the browser and I successfully generated and downloaded a PNG — so that works :) JSZip looks promising for the final stage.

[eQRoeil]

Hi all,

I've created the "same" tool with php and ImageMagick (see my comment on http://filamentgroup.com/lab/grunticon/ )

What I do :

1. upload a zip archive with svg files
2. unzip and store svg files in a folder
3. use imageMagick to convert svg to png
4. read svg and png directories to get base64 data and write css files (and preview.html)
5. create a zip to download

You can see some already created "sets"

http://soqr.fr/unicon/sets/iconic-set/preview.html (iconic set)

http://soqr.fr/unicon/sets/webicons-set/preview.html (webicons social icons used by zurb)

There are links to the archive if you want.

My code is old (I made it few hours after "unicon" article on filamentgroup lab) I never had a look until today... it's a mess... but if you need it...

Pascal

@eQRoeil

[ericponto]

Since the main repo was going the Node route, I created my own to work on a browser only version. (It uses a lot of @dbushell's ideas...canvg, FileReader, JSZip)

https://github.com/ericponto/grunticon-ui

I haven't tested it out too much yet, but I think it's working for at least the couple of svgs I did test.

[jefflembeck]

@ericponto The main repo only went that way for some easy to serve public assets. I was thinking of handling a pretty simple web app with express. If you've got something up and going, let's get it in and we can run with it.

[jefflembeck]

@ericponto just played with yours. This is AWESOME. Let me see what I can do to make this really easy for you to PR in.

[jefflembeck]

Hey @ericponto, if you add an index.html file to the main dir of the repo and then throw all of your css/js into a public folder from the root directory, the node app should work as planned now. (just run node app.js and go to localhost:3000).

Let me know if you need any help with the PR.

[ericponto]

Cool deal. I'll get a pull request submitted as soon as I have time today.

[jefflembeck]

@ericponto is awesome.