pathicon

A Pathicon is simply an icon described by a svg path. See Raphael Icons as an example.

Here is an example path:

M2.379,14.729 5.208,11.899 12.958,19.648 25.877,6.733 28.707,9.561 12.958,25.308z

This describes a checkmark. Place the above in a file called img/checkmark.path

Adding to a page

Add a div, or an i tag, eg:

<i id="checkmark-icon" />

and then bind an icon to it using requirejs

define(["pathicon!img/checkmark?id=checkmark-icon,width=64,height=64,fill=#ccc"], function(icon){})

at this point you will have a 64x64 icon rendered filled #ccc! Simple.

Want to do more? the icon variable is a raphael element that can be manipulated. Eg.

icon.glow()

Installing

you will need jam

jam install pathicon

Small!

The whole point of pathicons is they are small, and that when you opimize with requirejs, they are minified and included in the optimized file. This can allow you to have only one .js file to hold all your js and your icons! Sweet.

Where Can I Get Paths?

We are working on a svg->path tool, but in the meantime, you can do mostly by had pretty easy. Here are some good places for vector icons:

Is this better than Font Icons?