FANDOM


WDSIcons is a library aimed at making it easier for other script authors to use Design System icons in their scripts.

Usage

Library usage

To use WDSIcons, attach your icon logic to the dev.wds event using mw.hook.

Importing the script

Once you've set up your script logic, you can import the library after.

// register hook before import to avoid race conditions
mw.hook('dev.wds').add(function(wds) {
    // wds is a shortcut to window.dev.wds
});
 
importArticle({ type: 'script', article: 'u:dev:WDSIcons/code.js' });

Library methods

The library has the following keys, controlling icon usage in the library:

  • wds.iconset - iconset array
  • wds.sizemap - size map of icon subset against icon dimensions
  • wds.icon - icon method that returns jQuery element
  • wds.render - renderer for script elements

Icon addition

Icons can be appended directly or as variables, with support for jQuery methods.

mw.hook('dev.wds').add(function(wds) {
    $('foo').append(wds.icon('pencil-small'));
    var bar = wds.icon('trash-small')
        .addClass('garbage')
        .appendTo($('.foo'));
});

Library renderer

The library can operate on an existing section of HTML, or article content.

Article usage:

<div class="bar"><!--
 --><div class="wds-icon wds-icon-small" id="dev-wds-icons-gear"><!--
 --></div>
</div>
mw.hook('dev.wds').add(function(wds) {
    wds.render('.bar');
});

Script usage:

mw.hook('dev.wds').add(function(wds) {
    $('.foo').append(
        $('<div>', {
            'class': 'wds-icon wds-icon-small',
            'id': 'dev-wds-icons-gear-small'
        })
    );
    wds.render('.foo');
});