WDSIcons

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

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

bell

external

image

link

pages

WDSIcons

Contents