dees-catalog/ts_web/elements/dees-icon.ts
2023-01-07 15:43:37 +01:00

133 lines
3.1 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; 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];
}
}
}