Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Icons described by a path only. AMD loader for bundling and compression.
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
.gitignore
README.md
package.json
pathicon.js

README.md

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?

I am not sure. Time will tell. Font icons seem like a workaround, and a lot of work to create!

Something went wrong with that request. Please try again.