import { Component, Host, Prop, h } from '@stencil/core';
export class Icon {
    constructor() {
        this.size = '1em';
    }
    render() {
        let url = `https://api.iconify.design/${this.icon}.svg?color=${encodeURIComponent(this.color)}`;
        return (h(Host, null,
            h("i", { style: { display: 'inline-block', width: this.size, height: this.size, background: `url('${url}') no-repeat center center / contain` } })));
    }
    static get is() { return "bb-icon"; }
    static get encapsulation() { return "shadow"; }
    static get properties() { return {
        "icon": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "icon",
            "reflect": false
        },
        "color": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "color",
            "reflect": false
        },
        "size": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "size",
            "reflect": false,
            "defaultValue": "'1em'"
        }
    }; }
}
