Where applicable, convert SVG usage from background-image to mask-image

[CaraesNaur]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

SVGs used as background-image do not exist in the DOM, and therefore cannot make use of CSS color values in the document stylesheet.

Monochromatic SVG images (accordion-button, close-button, etc) could instead be used as a mask-image, where setting the background-color makes the shape visible. That color value would be easy to inherit as from an ancestor's CSS properties and become themeable.

State-based opacity and background-color change could still be used for interactivity cues.

For example:

.btn-close {
    /*
    Optionally reference theme color CSS variables from an ancestor: primary, success, danger, etc.
    These colors are obviously placeholders.
    */
    --bs-btn-close-color: light-dark(#fff, #000);
    --bs-btn-close-bg: light-dark(#000, #fff);
    /* The SVG's colors don't matter, it's just a mask */
    --bs-btn-close-mask: url([snipped for brevity]);
    --bs-btn-close-opacity: 0.25;
    --bs-btn-close-hover-opacity: 0.5;
    --bs-btn-close-focus-opacity: 1;
    --bs-btn-close-disabled-opacity: 0.25;
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: var(--bs-btn-close-color);
    border: 0;
    border-radius: var(--bs-border-radius);
    opacity: var(--bs-btn-close-opacity);
}
.btn-close::before {
    content: '';
    inset: 0;
    background-color: var(--bs-btn-close-bg);
    mask-image: var(--bs-btn-close-mask);
    mask-repeat: no-repeat;
    mask-clip: content-box;
    mask-origin: content-box;
}

Unfortunately, using the existing SVGs directly on an element masks things like border and drop-shadow, so the mask would be placed on a pseudo-element.

At that point I'm pretty sure the SVGs could be moved to :root or one of the @layers.

Motivation and context

This change would make many SVG decorations more easily themed (such as #39481).