@kelvininc/ui-components
Version:
Kelvin UI Components
109 lines (108 loc) • 4.04 kB
JavaScript
import { Host, h } from "@stencil/core";
import { getClassMap } from "../../utils/css-class.helper";
import { getConfig } from "../utils";
/**
* @part icon - The icon container.
*/
export class KvIcon {
constructor() {
/** @inheritdoc */
this.customClass = '';
/** (optional) Icon custom color */
this.customColor = '';
}
render() {
const { baseAssetsUrl, symbolsFileName } = getConfig();
return (h(Host, { key: '5f095de8d3bc27d230cbca4d9c28c236fd1f7deb' }, h("svg", { key: 'dd7cc4f07e440c34313e6fa4f44ea07ada192957', part: "icon", xmlns: "http://www.w3.org/2000/svg", class: Object.assign(Object.assign({}, getClassMap(this.customClass)), { icon: true }), style: { fill: this.customColor } }, h("use", { key: 'a743d25411b98a263946c8da96ea951a5f36bba2', href: `${baseAssetsUrl}${symbolsFileName}#${this.name}` }))));
}
static get is() { return "kv-icon"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["icon.scss"]
};
}
static get styleUrls() {
return {
"$": ["icon.css"]
};
}
static get properties() {
return {
"name": {
"type": "string",
"attribute": "name",
"mutable": false,
"complexType": {
"original": "EIconName",
"resolved": "EIconName",
"references": {
"EIconName": {
"location": "import",
"path": "./icon.types",
"id": "src/components/icon/icon.types.ts::EIconName"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "(required) Icon symbol name"
},
"getter": false,
"setter": false,
"reflect": true
},
"customClass": {
"type": "string",
"attribute": "custom-class",
"mutable": false,
"complexType": {
"original": "CustomCssClass",
"resolved": "CssClassMap | string | string[]",
"references": {
"CustomCssClass": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::CustomCssClass"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "''"
},
"customColor": {
"type": "string",
"attribute": "custom-color",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "(optional) Icon custom color"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "''"
}
};
}
}