Note: asset output HTML is changed to be more similar to the design system upstream:

• The wiki application renders all WDS icons with a id attribute.
• The design system doesn't assign a identifier to icons.
• WDSIcons only assigns a data-id attribute to provide icon names.

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:MediaWiki:WDSIcons/code.js' });

Library methods

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

• wds.registry - object containing valid identifiers per asset type
• wds.iconset - iconset array
• wds.sizemap - size map of asset type subset against asset dimensions
• wds.icon - icon asset generator that returns SVG element - includes pre August 2021 rebrand vertical assets except the Fandom heart
• wds.badge - badge asset generator that returns SVG element
• wds.company - company asset generator that returns SVG element - pre August 2021 rebrand
• wds.brand - company asset generator that returns SVG element - post August 2021 rebrand
• wds.vertical - vertical asset generator that returns SVG element - post August 2021 rebrand
• wds.render - renderer for WDS element placeholders

Asset addition

Assets can be appended directly or as variables, with support for custom attributes.

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

Library renderer

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

• Icon asset placeholders - dev-wds-icons-NAME identifier
• Badge asset placeholders - dev-wds-avatar-badges-NAME identifier
• Company asset placeholders - dev-wds-company-NAME identifier
• Brand asset placeholders - dev-wds-brand-NAME identifier
• Vertical asset placeholders - dev-wds-verticals-NAME identifier

These are substituted with the corresponding WDS asset. The library also allows attributes on placeholders.

Article usage:

<div class="bar"><!--
 --><div class="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>', {
            'id': 'dev-wds-icons-gear-small'
        })
    );
    wds.render('.foo');
});

Demo

See also

• FandomIcons
• FontAwesome