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 {} from '@fortawesome/free-regular-svg-icons'; import { faDesktop, faRss, faUsers } from '@fortawesome/free-solid-svg-icons'; type TFontAwesomeIcon = // normal | 'desktop' | 'rss' // brands | 'facebook' | 'google' | 'linkedin' | 'instagram' | 'medium' | 'slack' | 'tiktok' | 'twitter' | 'users'; const faIcons: { [key: string]: IconDefinition } = { // normal desktop: faDesktop, rss: faRss, // brands facebook: faFacebook, google: faGoogle, instagram: faInstagram, linkedin: faLinkedin, medium: faMedium, slack: faSlackHash, tiktok: faTiktok, twitter: faTwitter, users: faUsers, }; 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 iconName="visibility"></dees-icon> <dees-icon iconName="info"></dees-icon> <dees-icon iconName="brightness_4"></dees-icon> <dees-icon brandName="facebook"></dees-icon> </div> `; @property() public iconName: string; @property() public brandName: TFontAwesomeIcon; @property() public svgSize: number = 20; constructor() { super(); domtools.elementBasic.setup(); } public render() { return html` ${domtools.elementBasic.styles} <style> :host { display: block; line-height: inherit; font-size: inherit; margin: 0px; padding: 0px; white-space: nowrap; } #iconContainer svg { display: inline-block; height: ${this.svgSize}px; } .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: inherit; font-size: inherit; /* Preferred icon size */ display: inline-block; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48; } </style> ${this.iconName ? html` <i class="material-symbols-outlined" > ${this.iconName} </i>` : html``} ${this.brandName ? html`<div id="iconContainer"></div>` : html``} `; } public async firstUpdated() { if (this.brandName && !this.iconName) { this.shadowRoot.querySelector('#iconContainer').innerHTML = icon( faIcons[this.brandName] ).html[0]; } } }