@postnord/web-components/esm/pn-icon.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { r as registerInstance, h, a as Host } from './index-dc6e40e7.js';
import { c as colors } from './colors-e7319e31.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 = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    /**
     * 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() });
    }
};
PnIcon.style = PnIconStyle0;

export { PnIcon as pn_icon };

//# sourceMappingURL=pn-icon.entry.js.map