feat(icon): implement new icon system (#557)

Author: clemgbld

public/components/expandable/expandable.css

@@ -1,34 +1,7 @@
-span.expandable {
-  display: flex;
-  align-items: center !important;
-  justify-content: center !important;
-  height: 35px;
-  font-size: 13px;
-  font-family: mononoki;
-  background: none;
-  color: #00B0FF;
-  text-shadow: 1px 1px 1px rgb(20 20 20 / 50%);
-  transition: all 0.2s linear;
-  margin-top: 5px;
-}
-
-span.expandable[data-value="opened"] {
-  color: #F44336 !important;
-}
-
-span.expandable:hover {
-  cursor: pointer;
-}
-
-span.expandable i {
-  margin-right: 4px;
-  margin-top: 1px;
-}
-
 /**
  * CUSTOM CSS
  */
-.package-scripts>.expandable {
+.package-scripts> expandable-span {
   margin-top: 10px;
 }
 

public/components/expandable/expandable.js

@@ -1,11 +1,40 @@
 // Import Third-party Dependencies
-import { LitElement, html } from "lit";
+import { LitElement, html, css } from "lit";
 import { when } from "lit/directives/when.js";
 
 // Import Internal Dependencies
 import { currentLang } from "../../common/utils";
+import "../icon/icon.js";
 
 class Expandable extends LitElement {
+  static styles = css`
+span.expandable {
+  display: flex;
+  align-items: center !important;
+  justify-content: center !important;
+  height: 35px;
+  font-size: 13px;
+  font-family: mononoki;
+  background: none;
+  color: #00B0FF;
+  text-shadow: 1px 1px 1px rgb(20 20 20 / 50%);
+  transition: all 0.2s linear;
+  margin-top: 5px;
+}
+
+span.expandable[data-value="opened"] {
+  color: #F44336 !important;
+}
+
+span.expandable:hover {
+  cursor: pointer;
+}
+
+span.expandable nsecure-icon {
+  margin-right: 4px;
+  margin-top: 1px;
+}
+`;
   static properties = {
     onToggle: { type: Function },
     isClosed: { type: Boolean }
@@ -17,20 +46,15 @@ class Expandable extends LitElement {
     this.onToggle = () => void 0;
   }
 
-  // FIXME: must opt out from the shadow DOM for now because of to be able to apply CSS from fontello
-  createRenderRoot() {
-    return this;
-  }
-
   render() {
     const lang = currentLang();
 
     return html`
       <span data-value=${this.isClosed ? "opened" : "closed"}  @click=${this.#handleClick} class="expandable">
         ${when(this.isClosed,
-          () => html`<i class="icon-minus-squared-alt"></i>
+          () => html`<nsecure-icon name="minus"></nsecure-icon>
         <p>${window.i18n[lang].home.showLess}</p>`,
-          () => html`<i class="icon-plus-squared-alt"></i>
+          () => html`<nsecure-icon name="plus"></nsecure-icon>
         <p>${window.i18n[lang].home.showMore}</p>`
         )}
       </span>

public/components/icon/icon.js

@@ -0,0 +1,66 @@
+// Import Third-party Dependencies
+import { LitElement, html, css, nothing } from "lit";
+
+// Constants
+const kIcons = {
+  plus: html`
+    <svg viewBox="0 0 804 1024" aria-hidden="true">
+<path
+      fill="currentColor"
+      d="M658.432 456.704v36.864q0 8.192-5.12 13.312t-13.312 5.12h-200.704v200.704q0 8.192-5.12
+         13.312t-13.312 5.12h-36.864q-8.192 0-13.312-5.12t-5.12-13.312v-200.704h-200.704q-8.192
+         0-13.312-5.12t-5.12-13.312v-36.864q0-7.168 5.12-12.288t13.312-5.12h200.704v-201.728q0-8.192
+         5.12-13.312t13.312-5.12h36.864q8.192 0 13.312 5.12t5.12 13.312v201.728h200.704q8.192 0
+         13.312 5.12t5.12 12.288zM731.136 712.704v-475.136q0-37.888-26.624-64.512t-64.512-26.624h-475.136q-37.888
+         0-64.512 26.624t-27.648 64.512v475.136q0 37.888 27.648 64.512t64.512 27.648h475.136q37.888
+         0 64.512-27.648t26.624-64.512zM804.864 237.568v475.136q0 68.608-48.128 116.736t-116.736
+         48.128h-475.136q-68.608 0-116.736-48.128t-48.128-116.736v-475.136q0-67.584 48.128-115.712t116.736-49.152h475.136q67.584
+         0 116.736 49.152t48.128 115.712z"/>
+    </svg>
+    `,
+  minus: html`
+  <svg viewBox="0 0 804 1024" aria-hidden="true">
+<path
+      fill="currentColor"
+      d="M658.432 456.704v36.864q0 8.192-5.12 13.312t-13.312 5.12h-475.136q-8.192 0-13.312-5.12t-5.12-13.312v-36.864q0-7.168
+         5.12-12.288t13.312-5.12h475.136q8.192 0 13.312 5.12t5.12 12.288zM731.136
+         712.704v-475.136q0-37.888-26.624-64.512t-64.512-26.624h-475.136q-37.888
+         0-64.512 26.624t-27.648 64.512v475.136q0 37.888 27.648 64.512t64.512 27.648h475.136q37.888
+         0 64.512-27.648t26.624-64.512zM804.864 237.568v475.136q0 68.608-48.128 116.736t-116.736
+         48.128h-475.136q-68.608 0-116.736-48.128t-48.128-116.736v-475.136q0-67.584 48.128-115.712t116.736-49.152h475.136q67.584
+         0 116.736 49.152t48.128 115.712z"/>
+</svg>
+`
+};
+
+export class Icon extends LitElement {
+  static styles = css`
+    :host {
+      width: 1em;
+      height: 1em;
+      margin-right: 0.2em;
+      margin-right: 0.2em;
+      display: inline-block;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      fill: currentColor;
+    }
+  `;
+
+  static properties = {
+    name: { type: String },
+    size: { type: String }
+  };
+
+  render() {
+    if (!(this.name in kIcons)) {
+      return nothing;
+    }
+
+    return kIcons[this.name];
+  }
+}
+
+customElements.define("nsecure-icon", Icon);