@limetech/lime-elements
Version:
139 lines (138 loc) • 4.51 kB
JavaScript
import { h } from "@stencil/core";
import { globalConfig } from "../../global/config";
import iconCache from "../../global/icon-cache/factory";
/**
* :::important
* To install your icon set correctly, please read the [documentation here](#/).
* :::
*
* The size and color of the icon is normally set in CSS, however there are a few
* standard sizes defined that can be used with the `size` property.
*
* @exampleComponent limel-example-icon-name
* @exampleComponent limel-example-icon-size
* @exampleComponent limel-example-icon-color
*/
export class Icon {
componentDidLoad() {
this.loadIcon(this.name);
}
render() {
return h("div", { key: '23b5f2c90c98461f65c0bcdb291f9958e00ac353', class: "container" });
}
async loadIcon(name) {
if (name === undefined || name === '') {
return;
}
const svgData = await this.loadSvg(name);
this.renderSvg(svgData);
}
/**
* Load the SVG data for the icon from the icon cache
*
* @param name - name of the icon
* @returns the icon SVG data
*/
loadSvg(name) {
return iconCache.get(name, globalConfig.iconPath);
}
/*
* There is no way to style external SVG files with CSS, i.e. SVGs loaded
* with <img src="file.svg" /> or <object data="file.svg" type="image/svg+xml" />
* will remain the way they look in the file.
* Therefore we inject the svg as inline markup instead.
*/
renderSvg(svgData) {
const container = this.host.shadowRoot.querySelector('div.container');
if (container) {
container.innerHTML = svgData;
}
}
static get is() { return "limel-icon"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["icon.scss"]
};
}
static get styleUrls() {
return {
"$": ["icon.css"]
};
}
static get properties() {
return {
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "IconSize",
"resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\"",
"references": {
"IconSize": {
"location": "import",
"path": "./icon.types",
"id": "src/components/icon/icon.types.ts::IconSize",
"referenceLocation": "IconSize"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Size of the icon"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "size"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Name of the icon"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "name"
},
"badge": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to give the icon a round background with some padding.\nOnly works when the `size` attribute is also set."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "badge"
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "name",
"methodName": "loadIcon"
}];
}
}