@electrovir/icon-element/dist/vir-icon.element.js

reusable element for displaying SVG icons

import { css, defineElement, unsafeHTML } from 'element-vir';
import { virIconColorCssVars } from './icon-color-css-vars';
export const VirIcon = defineElement()({
    tagName: 'vir-icon',
    hostClasses: {
        /** Ignores the given icon's embedded size and causes the <svg> element to fill its parent. */
        'vir-icon-fit-icon': ({ inputs }) => !!inputs.fitContainer,
    },
    styles: ({ hostClasses }) => css `
        :host {
            display: block;
            color: ${virIconColorCssVars['vir-icon-color'].value};
            fill: ${virIconColorCssVars['vir-icon-fill-color'].value};
            stroke: ${virIconColorCssVars['vir-icon-stroke-color'].value};
        }

        svg {
            /*
                svg is set to inline by default which causes weird padding under the image.
                See: https://stackoverflow.com/a/34952703
            */
            display: block;
        }

        ${hostClasses['vir-icon-fit-icon'].name} svg {
            height: 100%;
            width: 100%;
        }
    `,
    renderCallback: ({ inputs }) => {
        if (!inputs.icon) {
            return '';
        }
        return unsafeHTML(inputs.icon.templateString);
    },
});