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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-78a59ba0.js');
const colors = require('./colors-906edd40.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) {
        index.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.colors[this.color]);
    }
    render() {
        return index.h(index.Host, { key: '0faec19408b9494ceadcd19dc33a6a1d666b5b1b', role: "presentation", class: `pn-icon ${this.small ? 'small' : ''}`, innerHTML: this.getIcon() });
    }
};
PnIcon.style = PnIconStyle0;

exports.pn_icon = PnIcon;

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