@postnord/web-components/components/pn-icon2.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { c as colors } from './colors.js';

const pnIconCss = "pn-icon{display:inline-block;vertical-align:top}pn-icon svg{display:block;height:1.5em;width:1.5em}pn-icon.small svg{height:1em;width:1em}";
const PnIconStyle0 = pnIconCss;

const PnIcon = /*@__PURE__*/ proxyCustomElement(class PnIcon extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
    }
    /**
     * The SVG content of the icon you want to use.
     *
     * Flags cannot be colored.
     *
     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-icon--docs|PostNord Icons (Storybook)}
     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs|PostNord Flags (Storybook)}
     **/
    icon = '';
    /** Make the icon small (16 instead of 24px). */
    small = false;
    /**
     * Color the icon with one of the follwing colors from our library.
     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs|PostNord Colors (Storybook)}
     **/
    color = 'gray900';
    getIcon() {
        if (/pn-icon-flag/.test(this.icon))
            return this.icon;
        // The replace is just setting the fill attribute on the SVG to the color passed to the component
        return this.icon.replace(/(black|#000)/g, colors[this.color]);
    }
    render() {
        return h(Host, { key: '0faec19408b9494ceadcd19dc33a6a1d666b5b1b', role: "presentation", class: `pn-icon ${this.small ? 'small' : ''}`, innerHTML: this.getIcon() });
    }
    static get style() { return PnIconStyle0; }
}, [0, "pn-icon", {
        "icon": [1],
        "small": [4],
        "color": [1]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-icon":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnIcon);
            }
            break;
    } });
}

export { PnIcon as P, defineCustomElement as d };

//# sourceMappingURL=pn-icon2.js.map