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.
== ==
=== 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:
<!--
 --><!--
 -->
mw.hook('dev.wds').add(function(wds) {
 wds.render('.bar');
});
Script usage:
mw.hook('dev.wds').add(function(wds) {
 $('.foo').append(
 $('', {
 'id': 'dev-wds-icons-gear-small'
 })
 );
 wds.render('.foo');
});
== Demo ==
bellexternalimagelinkpages
== ==
* FandomIcons
* FontAwesome