ico.js

A dynamic icon generator. Why mess with "images" and "efficient graphical representations" when you can specify custom icons in a simple language to be drawn where they belong on the fly.

It works like this. Define an icon in the following format:

<script type="x-icon" name="triangle">
    {
        "width": 60,
        "height": 60,
        "lineWidth": 0,
        "retina": "yes please",
        "path": {
            "svg": "M 7 26 L 25 16 L 7 5 V 27 z",
            "width": 30,
            "height": 30
        },
        "fillColor": "#555555"
    }
</script>

Easy. Now include the defined icon like:

<a href="#" class="icon-triangle"></a>

The best way to figure it out is to look at examples, here are some:

API

{
    "width": [required] integer

    "height": [required] integer

    "lineWidth": integer (if omitted, lines will not be drawn)

    "lineColor": HTML color (if omitted, lines will not be drawn)

    "fillColor": HTML color (if omitted, shape will not be filled)

    "retina": [optional] if included, doubles pixel density

    "path": {
        "svg": "SVG path string",
        "width" : original width of image, as defined in the path string,
        "height": original width of image, as defined in the path string
    }
}

Requires CanVG
Vector icons from Raphaël (MIT License)