Documentation for how to correctly use custom icons with Codex is documented in https://doc.wikimedia.org/codex/latest/components/demos/icon.html#custom-icon
Minerva contains code that uses Codex's CSS icon mixin with a custom icon, as follows:
@minerva-icon-issue-severity-medium: '<path d="M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0zm1 16H9v-2h2zm0-4H9V4h2z"/>'; .minerva-icon--issue-severity-medium-mediumColor { .cdx-mixin-css-icon( @minerva-icon-issue-severity-medium, #ff5d01 ); }
However, using this mixin with a custom icon is undocumented and is not supported in the way that it's being used here. Codex's built-in icon variables look like this:
@cdx-icon-add: '<path d="M11 9V4H9v5H4v2h5v5h2v-5h5V9z"/>', 'false', 'false', 'false', 'false';
The mixin implementation relies on the presence of these extra 'false' parameters. When they're missing, as they are in Minerva's custom icons, it behaves incorrectly. This causes Minerva's Less code to produce the following CSS in Codex v1.3.2:
minerva-icon--issue-severity-medium-mediumColor { background-position: center; background-repeat: no-repeat; background-size: calc(max(1.25em, 20px)); min-width: 20px; min-height: 20px; width: 1.25em; height: 1.25em; display: inline-block; vertical-align: text-bottom; background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"%23ff5d01\"><path d=\"M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0zm1 16H9v-2h2zm0-4H9V4h2z\"/></svg>") } .minerva-icon--issue-severity-medium-mediumColor[dir='rtl'], html[dir='rtl'] .minerva-icon--issue-severity-medium-mediumColor:not([dir='ltr']) { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23ff5d01">extract(' <path d="M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0zm1 16H9v-2h2zm0-4H9V4h2z" />',4)</svg>') }
Note the unnecessary [dir='rtl'] block (the icon doesn't have a separate RTL variant) and note how the contents of the SVG image in that block are extract(' <path .... />',4), which is invalid.
(The output in Codex v1.3.3 is different and longer, but is broken in the same ways.)
Ideally Codex should document how to use the CSS-only icon mixin with custom icons, and perhaps adapt its mixin code to make custom icon usage easier (e.g. by handling the absence of 'false' more gracefully); see T358069. Until then, Minerva should conform its custom icon definition to Codex's style to avoid bugs.
QA
- Visit https://en.m.wikipedia.org/wiki/Special:WhatLinksHere/Template:Multiple_issues
- Find a page with issues banner at top
- Check the icons render correctly
