FANDOM


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
  • wds.badge - badge asset generator that returns SVG element
  • wds.company - company asset generator that returns SVG element
  • 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

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

See also

Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+