dees-catalog/ts_web/elements/dees-icon.ts
2022-07-14 23:29:25 +02:00

133 lines
3.0 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 {} 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;">
<dees-icon iconName="visibility"></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;
}
#iconContainer svg {
display: inline-block;
height: ${this.svgSize}px;
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
line-height: inherit;
font-size: inherit;
display: inline-block;
line-height: inherit;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
</style>
${this.iconName ? html`<i class="material-icons">${this.iconName}</i>` : html``}
${this.brandName ? html`<div id="iconContainer"></div>` : html``}
`;
}
firstUpdated() {
if (this.brandName && !this.iconName) {
this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(
faIcons[this.brandName]
).html[0];
}
}
}