2020-07-01 15:51:21 +02:00
|
|
|
/**
|
|
|
|
* @module icons.js
|
|
|
|
* @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, css } from 'lit-element';
|
|
|
|
import { CustomElement } from './element.js';
|
|
|
|
|
|
|
|
|
|
|
|
class ConverseIcon extends CustomElement {
|
|
|
|
|
|
|
|
static get properties () {
|
|
|
|
return {
|
|
|
|
color: String,
|
|
|
|
class_name: { attribute: "class" },
|
|
|
|
style: String,
|
|
|
|
size: String
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
static get styles () {
|
|
|
|
return css`
|
|
|
|
:host {
|
|
|
|
display: inline-block;
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
|
|
|
|
constructor () {
|
|
|
|
super();
|
|
|
|
this.class_name = "";
|
|
|
|
this.style = "";
|
|
|
|
this.size = "";
|
|
|
|
this.color = "";
|
|
|
|
}
|
|
|
|
|
|
|
|
getSource () {
|
2020-07-02 11:52:08 +02:00
|
|
|
return `#icon-${this.class_name.split(" ")[1].replace("fa-", "")}`;
|
2020-07-01 15:51:21 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
getStyles () {
|
|
|
|
return `
|
|
|
|
${this.size ? `width: ${this.size};` : ''}
|
|
|
|
${this.size ? `height: ${this.size};` : ''}
|
|
|
|
${this.color ? `fill: ${this.color};` : ''}
|
|
|
|
${this.style}
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
|
|
|
return html`<svg .style="${this.getStyles()}"> <use href="${this.getSource()}"> </use> </svg>`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
customElements.define("converse-icon", ConverseIcon);
|