131 lines
3.0 KiB
TypeScript
131 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; font-size: 24px">
|
|
<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;
|
|
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];
|
|
}
|
|
}
|
|
}
|