55 lines
1.4 KiB
JavaScript
55 lines
1.4 KiB
JavaScript
/**
|
|
* @copyright Alfredo Medrano Sánchez and the Converse.js contributors
|
|
* @description
|
|
* Component inspired by the one from fa-icons
|
|
* https://github.com/obsidiansoft-io/fa-icons/blob/master/LICENSE
|
|
* @license Mozilla Public License (MPLv2)
|
|
*/
|
|
|
|
import { html } from 'lit';
|
|
import { CustomElement } from './element.js';
|
|
|
|
import './styles/icon.scss';
|
|
|
|
|
|
class ConverseIcon extends CustomElement {
|
|
|
|
static get properties () {
|
|
return {
|
|
color: String,
|
|
class_name: { attribute: "class" },
|
|
style: String,
|
|
size: String
|
|
};
|
|
}
|
|
|
|
constructor () {
|
|
super();
|
|
this.class_name = "";
|
|
this.style = "";
|
|
this.size = "";
|
|
this.color = "";
|
|
}
|
|
|
|
getSource () {
|
|
return `#icon-${this.class_name.trim().split(" ")[1].replace("fa-", "")}`;
|
|
}
|
|
|
|
getStyles () {
|
|
const cssprop = this.color.match(/var\((--.*)\)/)?.[1];
|
|
const color = cssprop ? getComputedStyle(this).getPropertyValue(cssprop) : this.color;
|
|
return `
|
|
${this.size ? `width: ${this.size};` : ''}
|
|
${this.size ? `height: ${this.size};` : ''}
|
|
${color ? `fill: ${color};` : ''}
|
|
${this.style}
|
|
`;
|
|
}
|
|
|
|
render () {
|
|
return html`<svg .style="${this.getStyles()}"> <use href="${this.getSource()}"> </use> </svg>`;
|
|
}
|
|
}
|
|
|
|
customElements.define("converse-icon", ConverseIcon);
|