SVG Icon

by simurai

HTML

<input id="size-slider" type="range" min="16" max="48" step="2" value="16">
<span id="size-px">16px</span> <span>16px, 32px, 48px..</span>

<br><br>

<button class="icon-plus"></button>
<button class="icon-chart"></button>

CSS

html { padding: 50px; font: 14px sans-serif; color: #ccc; }
#size-px { padding: 5px; border-radius: 4px; color: white; background: green; font-weight: bold; }

button {
    width:  16px;
    height: 16px;
    border: 0;
    margin: 4px;
    background: url(http://xn--dahlstrm-t4a.net/tmp/sharp-icons/svg-icon.svg) no-repeat;
    background-size: auto 100%;
    cursor: pointer;        
}
button.icon-plus { background-position: 0 0; }
button.icon-chart { background-position: 100% 0; }

button:hover { background-color: #ccc; }
button:active { background-color: #666; }

JavaScript

// SVG Icons are only "really" sharp in their original size (in this case 16px) and every multiple: ex. 16px, 32px, 48px..

// And when used as background-image, you can't resize them in Firefox and Opera without becomming really blurry.


// More info: http://simurai.com/19895985870



$(function() {

    $("#size-slider").change(function(e) {
        var sizeValue = $(this).val();
        var sizePx = sizeValue + "px";
        $("#size-px").html(sizePx);
        $("button").css( {"width": sizePx, "height": sizePx });

        if( sizeValue % 16 )   {
            $("#size-px").css( "background", "red");
        } else {
            $("#size-px").css( "background", "green");
        }            
    });

});