JSDoc: Module: jQuerySVGIcons

SVG Icon Loader 2.0

jQuery Plugin for loading SVG icons from a single file

Adds external:jQuery.svgIcons, external:jQuery.getSvgIcon, external:jQuery.resizeSvgIcons

How to use:

Create the SVG master file that includes all icons:

The master SVG icon-containing file is an SVG file that contains <g> elements. Each <g> element should contain the markup of an SVG icon. The <g> element has an ID that should correspond with the ID of the HTML element used on the page that should contain or optionally be replaced by the icon. Additionally, one empty element should be added at the end with id "svg_eof".

Optionally create fallback raster images for each SVG icon.
Include the jQuery and the SVG Icon Loader scripts on your page.
Run $.svgIcons() when the document is ready. See its signature
To access an icon at a later point without using the callback, use this: $.getSvgIcon(id (string), uniqueClone (boolean));

This will return the icon (as jQuery object) with a given ID.

To resize icons at a later point without using the callback, use this: $.resizeSvgIcons(resizeOptions) (use the same way as the "resize" parameter)

Copyright:

License:

Source:

svgicons/jQuery.svgIcons.js, line 3

Examples

$(function () {
  $.svgIcons('my_icon_set.svg'); // The SVG file that contains all icons
  // No options have been set, so all icons will automatically be inserted
  // into HTML elements that match the same IDs.
});

$(function () {
  // The SVG file that contains all icons
  $.svgIcons('my_icon_set.svg', {
    callback (icons) { // Custom callback function that sets click
                  // events for each icon
      $.each(icons, function (id, icon) {
        icon.click(function () {
          alert('You clicked on the icon with id ' + id);
        });
      });
    }
  });
});

$(function () {
  // The SVGZ file that contains all icons
  $.svgIcons('my_icon_set.svgz', {
    w: 32,  // All icons will be 32px wide
    h: 32,  // All icons will be 32px high
    fallback_path: 'icons/',  // All fallback files can be found here
    fallback: {
      '#open_icon': 'open.png',  // The "open.png" will be appended to the
                    // HTML element with ID "open_icon"
      '#close_icon': 'close.png',
      '#save_icon': 'save.png'
    },
    placement: {'.open_icon': 'open'}, // The "open" icon will be added
                    // to all elements with class "open_icon"
    resize: {
      '#save_icon .svg_icon': 64  // The "save" icon will be resized to 64 x 64px
    },

    callback (icons) { // Sets background color for "close" icon
      icons.close.css('background', 'red');
    },

    svgz: true // Indicates that an SVGZ file is being used
  });
});