@jack-henry/jh-icons 1.2.0 → 2.0.0-beta.7

package/icons-wc/icon-bookmark.js

@@ -1,7 +1,8 @@
-// SPDX-FileCopyrightText: 2025 Jack Henry
-//
-// SPDX-License-Identifier: Apache-2.0
-
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
 import {LitElement, css, html} from 'lit';
 
 export default class JhIconBookmark extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconBookmark extends LitElement {
       :host([size='x-small']) {
         --icon-size: var(
           --jh-icon-size-extra-small,
-          var(--jh-size-400)
+          var(--jh-dimension-400)
         );
       }
       :host([size='small']) {
         --icon-size: var(
           --jh-icon-size-small,
-          var(--jh-size-500)
+          var(--jh-dimension-500)
         );
       }
       :host([size='medium']) {
         --icon-size: var(
           --jh-icon-size-medium,
-          var(--jh-size-600)
+          var(--jh-dimension-600)
         );
       }
       :host([size='large']) {
         --icon-size: var(
           --jh-icon-size-large,
-          var(--jh-size-900)
+          var(--jh-dimension-900)
         );
       }
       :host([size='x-large']) {
         --icon-size: var(
           --jh-icon-size-extra-large,
-          var(--jh-size-1400)
+          var(--jh-dimension-1400)
         );
       }
       svg {

package/icons-wc/icon-books.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconBook extends LitElement {
+  /** @type {ElementInternals} */
+  #internals;
+
+  static get styles() {
+    return css`
+      :host {
+        fill: var(
+          --jh-icon-color-fill,
+          var(--jh-color-content-secondary-enabled)
+        );
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: inline-block;
+      }
+      :host([size='x-small']) {
+        --icon-size: var(
+          --jh-icon-size-extra-small,
+          var(--jh-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-1400)
+        );
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+      * The size of the icon.
+      */
+      size: {
+        type: String, reflect: true 
+      }
+    }
+  }
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.#internals.role = 'graphics-symbol';
+    this.#internals.ariaHidden = 'true';
+
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    this.size = 'medium';
+  }
+
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">   <path d="M8.5 2.75a.75.75 0 0 1 .75.75v1.292h4.346a.75.75 0 0 1 .75.75v.795l3.8-.808a.75.75 0 0 1 .89.577l2.435 11.454h-.001l.393 1.85a.75.75 0 0 1-.577.889l-4.41.937a.75.75 0 0 1-.89-.578l-1.64-7.717v7.56a.75.75 0 0 1-.75.75h-5a.731.731 0 0 1-.058-.003l-.038.002h-5a.75.75 0 0 1-.75-.75v-17a.75.75 0 0 1 .75-.75h5Zm.846 14.895v2.106h3.5v-2.107h-3.5ZM4.25 19.75h3.5v-2.093h-3.5v2.093Zm12.81-1.254.237 1.117 2.943-.626-.237-1.116-2.943.625Zm-1.712-8.057 1.4 6.591 2.943-.626-1.401-6.59-2.942.624ZM4.25 16.157h3.5V7.843h-3.5v8.314Zm5.096-.012h3.5V9.884h-3.5v6.26Zm5.435-8.368.253 1.194 2.943-.625-.252-1.194-2.944.625Zm-5.435.607h3.5V6.292h-3.5v2.092ZM4.25 6.343h3.5V4.25h-3.5v2.093Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-books', JhIconBook);

package/icons-wc/icon-box-archive.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconBoxArchive extends LitElement {
+  /** @type {ElementInternals} */
+  #internals;
+
+  static get styles() {
+    return css`
+      :host {
+        fill: var(
+          --jh-icon-color-fill,
+          var(--jh-color-content-secondary-enabled)
+        );
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: inline-block;
+      }
+      :host([size='x-small']) {
+        --icon-size: var(
+          --jh-icon-size-extra-small,
+          var(--jh-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-1400)
+        );
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+      * The size of the icon.
+      */
+      size: {
+        type: String, reflect: true 
+      }
+    }
+  }
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.#internals.role = 'graphics-symbol';
+    this.#internals.ariaHidden = 'true';
+
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    this.size = 'medium';
+  }
+
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">   <path d="M20.102 4.005A1 1 0 0 1 21 5v2l-.005.103a1 1 0 0 1-.893.892L20 8h-.25v9a2.25 2.25 0 0 1-2.25 2.25h-11A2.25 2.25 0 0 1 4.25 17V8H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h16l.102.005ZM5.75 17c0 .414.336.75.75.75h11a.75.75 0 0 0 .75-.75V8H5.75v9Zm7.75-8a2 2 0 0 1 .204 3.99L13.5 13h-3l-.204-.01A2 2 0 0 1 10.5 9h3Zm-3 1.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3Zm-6-4h15v-1h-15v1Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-box-archive', JhIconBoxArchive);

package/icons-wc/icon-box-open.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconBoxOpen extends LitElement {
+  /** @type {ElementInternals} */
+  #internals;
+
+  static get styles() {
+    return css`
+      :host {
+        fill: var(
+          --jh-icon-color-fill,
+          var(--jh-color-content-secondary-enabled)
+        );
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: inline-block;
+      }
+      :host([size='x-small']) {
+        --icon-size: var(
+          --jh-icon-size-extra-small,
+          var(--jh-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-1400)
+        );
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+      * The size of the icon.
+      */
+      size: {
+        type: String, reflect: true 
+      }
+    }
+  }
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.#internals.role = 'graphics-symbol';
+    this.#internals.ariaHidden = 'true';
+
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    this.size = 'medium';
+  }
+
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">   <path d="M11.775 3.873a.751.751 0 0 1 .52.026l6.917 2.965.009.004.034.016.033.018c.015.008.03.016.043.026l.01.007.03.022.02.016.01.007.016.015a.773.773 0 0 1 .083.088c.003.004.008.008.01.012l2.333 3.014a.75.75 0 0 1-.297 1.149l-1.878.803v4.385c0 .3-.18.571-.455.69L12.296 20.1a.749.749 0 0 1-.297.06.752.752 0 0 1-.288-.059c-.002 0-.004 0-.006-.002l-6.918-2.964a.751.751 0 0 1-.454-.69v-4.384l-1.879-.804a.75.75 0 0 1-.297-1.149L4.49 7.095l.011-.012a.75.75 0 0 1 .166-.153l.004-.002.01-.007a.73.73 0 0 1 .088-.048l.018-.009L11.704 3.9l.071-.026Zm2.853 10.349a.75.75 0 0 1-.889-.23l-.99-1.28v5.561l5.419-2.32v-3.249l-3.54 1.518Zm-8.795 1.73 5.416 2.32v-5.557l-.988 1.277a.75.75 0 0 1-.889.23l-3.539-1.517v3.247ZM3.937 10.26l5.493 2.354 1.385-1.787L5.32 8.472 3.937 10.26Zm9.249.567 1.384 1.787 5.494-2.354-1.385-1.788-5.493 2.355ZM6.984 7.553l4.873 2.087a.755.755 0 0 1 .284 0l4.872-2.087-5.014-2.149-5.015 2.149Z"/> </svg>   
+    `;
+  }
+}
+
+customElements.define('jh-icon-box-open', JhIconBoxOpen);

package/icons-wc/icon-box.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconBox extends LitElement {
+  /** @type {ElementInternals} */
+  #internals;
+
+  static get styles() {
+    return css`
+      :host {
+        fill: var(
+          --jh-icon-color-fill,
+          var(--jh-color-content-secondary-enabled)
+        );
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: inline-block;
+      }
+      :host([size='x-small']) {
+        --icon-size: var(
+          --jh-icon-size-extra-small,
+          var(--jh-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-1400)
+        );
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+      * The size of the icon.
+      */
+      size: {
+        type: String, reflect: true 
+      }
+    }
+  }
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.#internals.role = 'graphics-symbol';
+    this.#internals.ariaHidden = 'true';
+
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    this.size = 'medium';
+  }
+
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">   <path d="M11.776 2.713a.75.75 0 0 1 .519.026l8 3.429.015.007a.77.77 0 0 1 .053.027.39.39 0 0 1 .044.026l.006.003a.749.749 0 0 1 .203.2c.01.014.018.028.027.043.008.015.018.029.026.045a.678.678 0 0 1 .05.13.769.769 0 0 1 .016.07.763.763 0 0 1 .015.139v10.285a.75.75 0 0 1-.454.689l-8.001 3.429a.75.75 0 0 1-.59 0l-8.002-3.429a.75.75 0 0 1-.454-.69V6.858l.006-.093a.755.755 0 0 1 .111-.309l.023-.031a.748.748 0 0 1 .04-.053l.017-.02a.746.746 0 0 1 .067-.064l.008-.007a.75.75 0 0 1 .065-.049c.002 0 .003-.002.005-.003l.05-.029a.754.754 0 0 1 .044-.022l.018-.009 8.001-3.429.072-.026ZM4.75 16.647l6.5 2.786V10.78l-6.5-2.786v8.654Zm8-5.867v8.653l6.501-2.785V7.994L12.75 10.78ZM9.713 8.49l2.286.98 6.097-2.614-2.33-.998L9.714 8.49Zm-3.81-1.634 1.916.822 6.054-2.631-1.874-.803-6.097 2.612Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-box', JhIconBox);

package/icons-wc/icon-briefcase.js

@@ -1,7 +1,8 @@
-// SPDX-FileCopyrightText: 2025 Jack Henry
-//
-// SPDX-License-Identifier: Apache-2.0
-
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
 import {LitElement, css, html} from 'lit';
 
 export default class JhIconBriefcase extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconBriefcase extends LitElement {
       :host([size='x-small']) {
         --icon-size: var(
           --jh-icon-size-extra-small,
-          var(--jh-size-400)
+          var(--jh-dimension-400)
         );
       }
       :host([size='small']) {
         --icon-size: var(
           --jh-icon-size-small,
-          var(--jh-size-500)
+          var(--jh-dimension-500)
         );
       }
       :host([size='medium']) {
         --icon-size: var(
           --jh-icon-size-medium,
-          var(--jh-size-600)
+          var(--jh-dimension-600)
         );
       }
       :host([size='large']) {
         --icon-size: var(
           --jh-icon-size-large,
-          var(--jh-size-900)
+          var(--jh-dimension-900)
         );
       }
       :host([size='x-large']) {
         --icon-size: var(
           --jh-icon-size-extra-large,
-          var(--jh-size-1400)
+          var(--jh-dimension-1400)
         );
       }
       svg {

package/icons-wc/icon-broom.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconBroom extends LitElement {
+  /** @type {ElementInternals} */
+  #internals;
+
+  static get styles() {
+    return css`
+      :host {
+        fill: var(
+          --jh-icon-color-fill,
+          var(--jh-color-content-secondary-enabled)
+        );
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: inline-block;
+      }
+      :host([size='x-small']) {
+        --icon-size: var(
+          --jh-icon-size-extra-small,
+          var(--jh-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-1400)
+        );
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+      * The size of the icon.
+      */
+      size: {
+        type: String, reflect: true 
+      }
+    }
+  }
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.#internals.role = 'graphics-symbol';
+    this.#internals.ariaHidden = 'true';
+
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    this.size = 'medium';
+  }
+
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">   <path d="M18.559 2.84a1.75 1.75 0 0 1 2.438-.279l.165.13a1.75 1.75 0 0 1 .319 2.432l-6.849 9.074c.996 1.004 1.227 2.543.61 3.818-.179.37-.35.74-.484 1.058-.34.807-.768 1.561-1.42 2.06-.691.53-1.537.704-2.54.538-.586-.097-1.24-.389-1.887-.762a17.22 17.22 0 0 1-2.073-1.44c-1.41-1.124-2.858-2.542-3.95-3.886a.751.751 0 0 1 .693-1.215c.947.14 1.475-.11 1.845-.401a4.34 4.34 0 0 0 .56-.555c.156-.176.382-.446.63-.624.282-.202.604-.46.925-.729 1.084-.907 2.635-1.084 3.865-.374l7.153-8.845ZM7.454 14.036a4.5 4.5 0 0 0-.344.37 5.776 5.776 0 0 1-.755.74c-.352.277-.775.51-1.29.643.2.214.408.426.62.637.091.015.215.031.358.031.319 0 .69-.073 1.016-.328a.75.75 0 1 1 .923 1.183 2.95 2.95 0 0 1-.844.458 19.192 19.192 0 0 0 1.542 1.206l.006.002c.139.015.344.027.587.007a3.013 3.013 0 0 0 1.71-.707.75.75 0 0 1 .965 1.15 4.56 4.56 0 0 1-1.15.703c.089.026.17.047.245.06.679.111 1.083-.018 1.382-.248.318-.243.604-.665.895-1.325l-5.866-4.582Zm3.41-.916c-.623-.486-1.51-.496-2.192-.036l5.284 4.128c.293-.761.072-1.62-.553-2.108l-2.54-1.984Zm9.21-9.377a.25.25 0 0 0-.348.04l-7.115 8.799.856.669 6.818-9.031a.251.251 0 0 0-.047-.348l-.164-.129Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-broom', JhIconBroom);

package/icons-wc/icon-browser.js

@@ -1,7 +1,8 @@
-// SPDX-FileCopyrightText: 2025 Jack Henry
-//
-// SPDX-License-Identifier: Apache-2.0
-
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
 import {LitElement, css, html} from 'lit';
 
 export default class JhIconBrowser extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconBrowser extends LitElement {
       :host([size='x-small']) {
         --icon-size: var(
           --jh-icon-size-extra-small,
-          var(--jh-size-400)
+          var(--jh-dimension-400)
         );
       }
       :host([size='small']) {
         --icon-size: var(
           --jh-icon-size-small,
-          var(--jh-size-500)
+          var(--jh-dimension-500)
         );
       }
       :host([size='medium']) {
         --icon-size: var(
           --jh-icon-size-medium,
-          var(--jh-size-600)
+          var(--jh-dimension-600)
         );
       }
       :host([size='large']) {
         --icon-size: var(
           --jh-icon-size-large,
-          var(--jh-size-900)
+          var(--jh-dimension-900)
         );
       }
       :host([size='x-large']) {
         --icon-size: var(
           --jh-icon-size-extra-large,
-          var(--jh-size-1400)
+          var(--jh-dimension-1400)
         );
       }
       svg {

package/icons-wc/icon-bug-filled.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconBugFilled extends LitElement {
+  /** @type {ElementInternals} */
+  #internals;
+
+  static get styles() {
+    return css`
+      :host {
+        fill: var(
+          --jh-icon-color-fill,
+          var(--jh-color-content-secondary-enabled)
+        );
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: inline-block;
+      }
+      :host([size='x-small']) {
+        --icon-size: var(
+          --jh-icon-size-extra-small,
+          var(--jh-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-1400)
+        );
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+      * The size of the icon.
+      */
+      size: {
+        type: String, reflect: true 
+      }
+    }
+  }
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.#internals.role = 'graphics-symbol';
+    this.#internals.ariaHidden = 'true';
+
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    this.size = 'medium';
+  }
+
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">   <path d="M3.209 8.967a.75.75 0 0 1 1.038.216l.775 1.182a1.25 1.25 0 0 0 1.704.377l.147-.093a5.63 5.63 0 0 0 1.254 1.678c.808.75 1.892 1.352 3.123 1.527v8.016c-1.216-.018-1.932-.185-3.563-1.612-.333-.292-.64-.684-.921-1.132a6.577 6.577 0 0 1-.335-.602c-.31.147-.556.42-.662.77l-.425 1.422a.751.751 0 0 1-1.438-.432l.427-1.42a2.747 2.747 0 0 1 1.6-1.758 7.395 7.395 0 0 1-.157-2.197 1.25 1.25 0 0 0-.738.368l-1.505 1.55a.75.75 0 0 1-1.076-1.045l1.505-1.55a2.75 2.75 0 0 1 1.972-.834h.086c.081-.329.178-.657.291-.982a2.747 2.747 0 0 1-2.544-1.229l-.774-1.182a.75.75 0 0 1 .216-1.038Zm16.544.216a.75.75 0 0 1 1.254.822l-.775 1.182a2.748 2.748 0 0 1-2.567 1.227c.111.326.207.654.285.984h.115a2.75 2.75 0 0 1 1.973.834l1.505 1.55a.75.75 0 0 1-1.076 1.045l-1.505-1.55a1.251 1.251 0 0 0-.777-.373 7.624 7.624 0 0 1-.154 2.187 2.749 2.749 0 0 1 1.636 1.772l.427 1.421a.751.751 0 0 1-1.438.432l-.426-1.422a1.248 1.248 0 0 0-.682-.778c-.1.211-.21.42-.335.626-.28.463-.582.853-.9 1.116-1.478 1.22-2.302 1.53-3.563 1.598v-8.01c1.208-.185 2.271-.78 3.066-1.519a5.624 5.624 0 0 0 1.266-1.704l.192.12a1.25 1.25 0 0 0 1.703-.378l.776-1.182Zm-4.485-.399c.393.02.554.087.61.127.016.01.022.018.03.033.01.023.03.085.03.213-.001.546-.378 1.361-1.142 2.072-.745.691-1.749 1.178-2.824 1.178-1.076 0-2.08-.487-2.825-1.178-.764-.71-1.14-1.526-1.141-2.072 0-.128.02-.19.03-.213a.07.07 0 0 1 .028-.033c.057-.04.218-.107.61-.127.377-.019.84.008 1.415.044.56.036 1.204.08 1.883.08s1.323-.044 1.882-.08c.575-.036 1.039-.063 1.415-.044Zm1.877-6.472a1 1 0 1 1-.568 1.824c-.52.102-.73.134-1.139.305a.298.298 0 0 0-.062.068c-.056.074-.12.187-.202.364-.11.236-.262.604-.469.974a2.954 2.954 0 0 1 .255 1.431c-.38.002-.79.027-1.2.053-.57.036-1.165.076-1.788.076s-1.22-.04-1.788-.076c-.39-.025-.781-.048-1.145-.052a2.953 2.953 0 0 1 .31-1.548c-.175-.33-.307-.646-.407-.858a2.148 2.148 0 0 0-.202-.364.296.296 0 0 0-.062-.068c-.409-.171-.62-.203-1.14-.305A1 1 0 1 1 7.71 2.64c.554.108.968.174 1.55.419.593.25.874.824 1.04 1.177l.14.306a2.955 2.955 0 0 1 3.21.055l.166-.36c.166-.354.447-.929 1.04-1.178.58-.245.995-.311 1.548-.42a.999.999 0 0 1 .74-.326Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-bug-filled', JhIconBugFilled);