dees-catalog/ts_web/elements/dees-icon.ts
2023-01-11 17:50:37 +01:00

122 lines
2.8 KiB
TypeScript

import { DeesElement, html, property, customElement } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import { icon, IconDefinition } from '@fortawesome/fontawesome-svg-core';
import {
faFacebook,
faGoogle,
faLinkedin,
faMedium,
faSlackHash,
faTwitter,
faInstagram,
faTiktok,
} from '@fortawesome/free-brands-svg-icons';
import {
faMessage as faMessageRegular,
faSun as faSunRegular,
} from '@fortawesome/free-regular-svg-icons';
import {
faBell as faBellSolid,
faBug as faBugSolid,
faCircleInfo as faCircleInfoSolid,
faDesktop as faDesktopSolid,
faGrip as faGripSolid,
faMessage as faMessageSolid,
faRss as faRssSolid,
faUsers as faUsersSolid,
faShare as faShareSolid,
faSun as faSunSolid,
} from '@fortawesome/free-solid-svg-icons';
export const faIcons = {
// normal
bell: faBellSolid,
bellSolid: faBellSolid,
bug: faBugSolid,
bugSolid: faBugSolid,
circleinfo: faCircleInfoSolid,
circleinfoSolid: faCircleInfoSolid,
desktop: faDesktopSolid,
desktopSolid: faDesktopSolid,
grip: faGripSolid,
gripSolid: faGripSolid,
message: faMessageRegular,
messageSolid: faMessageSolid,
rss: faRssSolid,
rssSolid: faRssSolid,
share: faShareSolid,
shareSolid: faShareSolid,
sun: faSunRegular,
sunSolid: faSunSolid,
// brands
facebook: faFacebook,
google: faGoogle,
instagram: faInstagram,
linkedin: faLinkedin,
medium: faMedium,
slack: faSlackHash,
tiktok: faTiktok,
twitter: faTwitter,
users: faUsersSolid,
};
declare global {
interface HTMLElementTagNameMap {
'dees-icon': DeesIcon;
}
}
@customElement('dees-icon')
export class DeesIcon extends DeesElement {
public static demo = () => html`
<dees-icon iconName="visibility"></dees-icon>
<div style="background: #fff; padding: 10px; font-size: 24px">
<dees-icon iconFA="messageSolid"></dees-icon>
<dees-icon iconFA="sun"></dees-icon>
<dees-icon iconFA="sunSolid"></dees-icon>
<dees-icon iconFA="facebook"></dees-icon>
</div>
`;
@property()
public iconFA: keyof typeof faIcons;
@property()
public iconSize: number = 20;
constructor() {
super();
domtools.elementBasic.setup();
}
public render() {
return html`
${domtools.elementBasic.styles}
<style>
:host {
display: block;
margin: 0px;
padding: 0px;
white-space: nowrap;
}
#iconContainer svg {
display: inline-block;
height: ${this.iconSize}px;
}
</style>
<div id="iconContainer"></div>
`;
}
public async firstUpdated() {
if (this.iconFA) {
this.shadowRoot.querySelector('#iconContainer').innerHTML = this.iconFA
? icon(faIcons[this.iconFA]).html[0]
: 'icon not found';
}
}
}