Make icons more stylable

[vaughn-taylor]

I'm developing a plugin to make styling the CP much more intuitive and simple. I noticed that the display of icons varies greatly: some are inline SVG, and some are using a CSS pseudo selector pointing to an SVG background. Inline SVGs can be much easier to style if they don't rely on classes, but instead use fill="currentColor". By using currentColor, the icon color can be changed using the CSS color property.

I've noticed that the most difficult icons to style are in the page preview section; specifically, the desktop, tablet, and mobile icons at the top of the page. These rely on the before pseudo class, and point to background SVGs:

.lp-preview-container .lp-preview-header .lp-device-type .btn.lp-device-type-btn--desktop::before {
  background-image: url(../images/preview/icon-desktop.svg);
}

This is not ideal for styling, nor are they ideal for performance because a trip to the server is required. I propose something more like this for the btngroup:

<section class="btngroup lp-device-type" aria-label="Device type">
    <button type="button" class="btn lp-device-type-btn active" title="Desktop" aria-label="Desktop" aria-pressed="true">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor">
            <path d="M512 48H64c-8.8 0-16 7.2-16 16V256H528V64c0-8.8-7.2-16-16-16zm64 208v48 48c0 35.3-28.7 64-64 64H364.3l8 48H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H352 224 152c-13.3 0-24-10.7-24-24s10.7-24 24-24h51.7l8-48H64c-35.3 0-64-28.7-64-64V304 256 64C0 28.7 28.7 0 64 0H512c35.3 0 64 28.7 64 64V256zM48 304v48c0 8.8 7.2 16 16 16H239.5c.3 0 .6 0 .8 0h95.2c.3 0 .6 0 .8 0H512c8.8 0 16-7.2 16-16V304H48zM252.3 464h71.3l-8-48H260.3l-8 48z"></path>
        </svg>
    </button>
    <button type="button" class="btn lp-device-type-btn" title="Tablet" aria-label="Tablet" aria-pressed="false">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor">
            <path d="M64 48c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H64zM0 64C0 28.7 28.7 0 64 0H384c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zM224 392a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"></path>
        </svg>
    </button>
    <button type="button" class="btn lp-device-type-btn" title="Mobile" aria-label="Mobile" aria-pressed="false">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor">
            <path d="M80 48c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H304c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H80zM16 64C16 28.7 44.7 0 80 0H304c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V64zM160 400h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H160c-8.8 0-16-7.2-16-16s7.2-16 16-16z"></path>
        </svg>
    </button>
</section>

<style>
    .btn.lp-device-type-btn.active {
        color: red;
    }
    .btn.lp-device-type-btn svg {
        width: auto;
        height: 100%;
    }
</style>

The SVGs are inlined, so no need to go to the server. The icons are more similar to those found in the rest of the CP in Craft 5. Also, they all use currentColor so they are more easily styled. You'll end up with this: