dees-catalog/ts_web/elements/dees-icon.ts

119 lines
2.8 KiB
TypeScript
Raw Normal View History

2020-09-17 10:35:33 +00:00
import { LitElement, html, property, customElement } from 'lit-element';
import * as domtools from '@designestate/dees-domtools';
2020-12-02 17:11:04 +00:00
import { icon, IconDefinition } from '@fortawesome/fontawesome-svg-core';
import {
faFacebook,
faGoogle,
faLinkedin,
faMedium,
2020-12-03 11:12:11 +00:00
faSlackHash,
2020-12-02 17:11:04 +00:00
faTwitter,
} from '@fortawesome/free-brands-svg-icons';
2020-12-01 22:24:54 +00:00
2020-12-02 17:11:04 +00:00
import {} from '@fortawesome/free-regular-svg-icons';
2020-12-02 17:30:41 +00:00
import { faDesktop, faRss, faUsers } from '@fortawesome/free-solid-svg-icons';
2020-12-02 17:11:04 +00:00
type TFontAwesomeIcon =
// normal
| 'desktop'
| 'rss'
// brands
| 'facebook'
| 'google'
| 'twitter'
| 'linkedin'
| 'medium'
2020-12-02 17:30:41 +00:00
| 'slack'
| 'users';
2020-12-02 17:11:04 +00:00
const faIcons: { [key: string]: IconDefinition } = {
// normal
desktop: faDesktop,
rss: faRss,
// brands
2020-12-01 22:49:44 +00:00
facebook: faFacebook,
2020-12-02 17:11:04 +00:00
google: faGoogle,
2020-12-01 22:49:44 +00:00
linkedin: faLinkedin,
2020-12-02 17:11:04 +00:00
medium: faMedium,
2020-12-03 11:12:11 +00:00
slack: faSlackHash,
2020-12-02 17:11:04 +00:00
twitter: faTwitter,
2020-12-02 17:30:41 +00:00
users: faUsers,
2020-12-01 22:24:54 +00:00
};
2020-09-17 10:35:33 +00:00
@customElement('dees-icon')
export class DeesIcon extends LitElement {
2020-12-01 22:24:54 +00:00
public static demo = () => html`
<div style="background: #fff; padding: 10px;">
<dees-icon iconName="visibility"></dees-icon>
<dees-icon brandName="facebook"></dees-icon>
</div>
2020-12-02 17:11:04 +00:00
`;
2020-09-17 10:35:33 +00:00
@property()
public iconName: string;
2020-12-01 22:24:54 +00:00
@property()
2020-12-02 17:11:04 +00:00
public brandName: TFontAwesomeIcon;
2020-12-01 22:24:54 +00:00
@property()
public svgSize: number = 20;
2020-09-17 10:35:33 +00:00
constructor() {
super();
domtools.elementBasic.setup();
}
public render() {
return html`
${domtools.elementBasic.styles}
<style>
:host {
display: block;
line-height: inherit;
font-size: inherit;
}
2020-12-01 22:24:54 +00:00
#iconContainer svg {
display: inline-block;
height: ${this.svgSize}px;
}
2020-09-17 10:35:33 +00:00
.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>
2020-12-01 22:24:54 +00:00
${this.iconName ? html`<i class="material-icons">${this.iconName}</i>` : html``}
${this.brandName ? html`<div id="iconContainer"></div>` : html``}
2020-09-17 10:35:33 +00:00
`;
}
2020-12-01 22:24:54 +00:00
firstUpdated() {
if (this.brandName && !this.iconName) {
2020-12-02 17:11:04 +00:00
this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(
faIcons[this.brandName]
).html[0];
2020-12-01 22:24:54 +00:00
}
}
2020-09-17 10:35:33 +00:00
}