diff --git a/package-lock.json b/package-lock.json
index 098d4ad..ca0fe74 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1198,6 +1198,22 @@
"@fortawesome/fontawesome-common-types": "^0.2.32"
}
},
+ "@fortawesome/free-regular-svg-icons": {
+ "version": "5.15.1",
+ "resolved": "https://verdaccio.lossless.one/@fortawesome%2ffree-regular-svg-icons/-/free-regular-svg-icons-5.15.1.tgz",
+ "integrity": "sha512-eD9NWFy89e7SVVtrLedJUxIpCBGhd4x7s7dhesokjyo1Tw62daqN5UcuAGu1NrepLLq1IeAYUVfWwnOjZ/j3HA==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "^0.2.32"
+ }
+ },
+ "@fortawesome/free-solid-svg-icons": {
+ "version": "5.15.1",
+ "resolved": "https://verdaccio.lossless.one/@fortawesome%2ffree-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",
+ "integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "^0.2.32"
+ }
+ },
"@gitzone/tsbuild": {
"version": "2.1.25",
"resolved": "https://verdaccio.lossless.one/@gitzone%2ftsbuild/-/tsbuild-2.1.25.tgz",
diff --git a/package.json b/package.json
index 246638f..238fc62 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,8 @@
"@designestate/dees-wcctools": "^1.0.49",
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-brands-svg-icons": "^5.15.1",
+ "@fortawesome/free-regular-svg-icons": "^5.15.1",
+ "@fortawesome/free-solid-svg-icons": "^5.15.1",
"lit-element": "^2.4.0",
"typescript": "^4.1.2"
},
diff --git a/ts_web/elements/dees-icon.ts b/ts_web/elements/dees-icon.ts
index 8f9e786..b879314 100644
--- a/ts_web/elements/dees-icon.ts
+++ b/ts_web/elements/dees-icon.ts
@@ -2,15 +2,41 @@ import { LitElement, html, property, customElement } from 'lit-element';
import * as domtools from '@designestate/dees-domtools';
-import { icon, IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { faFacebook, faTwitter, faLinkedin, faMedium } from '@fortawesome/free-brands-svg-icons';
+import { icon, IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import {
+ faFacebook,
+ faGoogle,
+ faLinkedin,
+ faMedium,
+ faSlack,
+ faTwitter,
+} from '@fortawesome/free-brands-svg-icons';
-type TBrand = 'facebook' | 'twitter' | 'linkedin' | 'medium';
-const brandIcons: {[key: string]: IconDefinition} = {
+import {} from '@fortawesome/free-regular-svg-icons';
+import { faDesktop, faRss } from '@fortawesome/free-solid-svg-icons';
+
+type TFontAwesomeIcon =
+ // normal
+ | 'desktop'
+ | 'rss'
+ // brands
+ | 'facebook'
+ | 'google'
+ | 'twitter'
+ | 'linkedin'
+ | 'medium'
+ | 'slack';
+const faIcons: { [key: string]: IconDefinition } = {
+ // normal
+ desktop: faDesktop,
+ rss: faRss,
+ // brands
facebook: faFacebook,
- twitter: faTwitter,
+ google: faGoogle,
linkedin: faLinkedin,
- medium: faMedium
+ medium: faMedium,
+ slack: faSlack,
+ twitter: faTwitter,
};
@customElement('dees-icon')
@@ -20,14 +46,13 @@ export class DeesIcon extends LitElement {
-
- `;
+ `;
@property()
public iconName: string;
@property()
- public brandName: TBrand;
+ public brandName: TFontAwesomeIcon;
@property()
public svgSize: number = 20;
@@ -83,7 +108,9 @@ export class DeesIcon extends LitElement {
firstUpdated() {
if (this.brandName && !this.iconName) {
- this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(brandIcons[this.brandName]).html[0];
+ this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(
+ faIcons[this.brandName]
+ ).html[0];
}
}
}