We need an icon that works without client-side JS. This may or may not be truly "CSS-only."
There are 2 approaches we could take.
Approach 1: Icons as CSS background-images
This is how it currently works in OOUI: you can add the class .oo-ui-icon-article to get the style background-image: url(themes/wikimediaui/images/icons/article-ltr.svg);. Progressive, destructive, and inverted (white) icons are also supported via separate classes and svg files.
Considerations:
- This has historically been difficult to maintain and isn't flexible enough. However, we could consider using modern tools like mask-image to enable us to set the icons to any color without needing separate svgs (see here for more info on this technique)
- This is simple to use and people are already used to it
- We'd have to make the svgs available for use in this way
Approach 2: insert icon SVG into the markup on the server-side
We could instruct people to basically do what Icon.vue does in their back-end JS or PHP. This might look like:
import { resolveIcon, shouldIconFlip, cdxIconAlert } from '@wikimedia/codex-icons';
const resolvedIcon = resolveIcon( cdxIconAlert, 'en', 'ltr' );
const svg = typeof resolvedIcon === 'string' ? resolvedIcon : `<path d="${resolvedIcon.path}" />`;
const flipClass = shouldIconFlip( cdxIconAlert, 'en' ) ? 'cdx-icon--flipped': '';
const icon = `
<span class="cdx-icon ${flipClass}">
<svg ...attrs...>
<g>${svg}</g>
</svg>
</span>
`;Considerations:
- This is a lot more work than just slapping a CSS class or two on a span
- We could update our util functions to consolidate them into a single exportable function that provides all the icon data needed to make this a little easier
- This is not CSS-only, it's server-side