@jack-henry/jh-icons 1.2.0

package/icons-wc/icon-arrows-up-down-left-right.js

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconArrowsUpDownLeftRight 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-size-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-size-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-size-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-size-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-size-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 fill-rule="evenodd" d="m12 1.94.53.53 3 3a.75.75 0 0 1-1.06 1.06l-1.72-1.72v6.44h6.44l-1.72-1.72a.75.75 0 0 1 1.06-1.06l3 3 .53.53-.53.53-3 3a.75.75 0 1 1-1.06-1.06l1.72-1.72h-6.44v6.44l1.72-1.72a.75.75 0 1 1 1.06 1.06l-3 3-.53.53-.53-.53-3-3a.75.75 0 1 1 1.06-1.06l1.72 1.72v-6.44H4.81l1.72 1.72a.75.75 0 1 1-1.06 1.06l-3-3-.53-.53.53-.53 3-3a.75.75 0 0 1 1.06 1.06l-1.72 1.72h6.44V4.81L9.53 6.53a.75.75 0 1 1-1.06-1.06l3-3 .53-.53Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-arrows-up-down-left-right', JhIconArrowsUpDownLeftRight);

package/icons-wc/icon-at.js

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconAt 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-size-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-size-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-size-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-size-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-size-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 fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75V21v.75h.043c.024 0 .06 0 .105-.002a13.761 13.761 0 0 0 1.583-.13c.463-.066.98-.168 1.46-.328.466-.156.97-.39 1.34-.76a.75.75 0 1 0-1.061-1.06c-.13.13-.377.271-.754.397a7.029 7.029 0 0 1-1.197.266 12.295 12.295 0 0 1-1.493.117H12A8.25 8.25 0 1 1 20.25 12c0 1.093-.325 1.851-.757 2.356a2.708 2.708 0 0 1-1.616.904c-.601.1-1.163-.008-1.549-.243-.362-.222-.578-.554-.578-1.017V8a.75.75 0 0 0-1.5 0v.375c-.729-.696-1.679-1.125-2.75-1.125-2.438 0-4.25 2.224-4.25 4.75s1.812 4.75 4.25 4.75c1.235 0 2.31-.57 3.07-1.463.23.421.57.761.976 1.01.74.451 1.678.593 2.577.443a4.209 4.209 0 0 0 2.509-1.408c.693-.808 1.118-1.925 1.118-3.332A9.75 9.75 0 0 0 12 2.25ZM14.25 12c0-1.892-1.322-3.25-2.75-3.25S8.75 10.108 8.75 12s1.322 3.25 2.75 3.25 2.75-1.358 2.75-3.25Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-at', JhIconAt);

package/icons-wc/icon-authy.js

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconAuthy 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-size-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-size-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-size-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-size-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-size-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 fill-rule="evenodd" d="M17.834 6.167A8.25 8.25 0 1 0 6.166 17.834 8.25 8.25 0 0 0 17.834 6.167ZM5.106 5.106c3.807-3.808 9.98-3.808 13.788 0 3.808 3.807 3.808 9.98 0 13.789-3.807 3.807-9.98 3.807-13.788 0-3.808-3.808-3.808-9.982 0-13.79Zm6.275 5.038a2.5 2.5 0 0 0-3.535 3.536l1.944 1.944a.75.75 0 1 1-1.06 1.06L6.785 14.74a4 4 0 1 1 5.657-5.657l1.944 1.945a.75.75 0 0 1-1.06 1.06l-1.945-1.944Zm4.773.177a2.5 2.5 0 0 1-3.535 3.535l-1.945-1.944a.75.75 0 1 0-1.06 1.06l1.944 1.945a4 4 0 0 0 5.657-5.657L15.27 7.316a.75.75 0 1 0-1.06 1.06l1.944 1.945Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-authy', JhIconAuthy);

package/icons-wc/icon-bag.js

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconBag 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-size-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-size-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-size-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-size-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-size-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 fill-rule="evenodd" d="M16.495 6.413a4.5 4.5 0 0 0-8.995.212v.75H4.286a.75.75 0 0 0-.746.676l-1.123 11.35a2.252 2.252 0 0 0 2.24 2.474h14.689a2.248 2.248 0 0 0 2.237-2.47L20.46 8.052a.75.75 0 0 0-.746-.676H16.5v-.75l-.005-.212ZM15 8.875v1.75l.007.102a.75.75 0 0 0 1.493-.102v-1.75h2.535l1.056 10.678a.748.748 0 0 1-.745.822H4.658l-.1-.006a.753.753 0 0 1-.649-.82L4.965 8.875H7.5v1.75l.007.102A.75.75 0 0 0 9 10.625v-1.75h6Zm0-1.5v-.75a3 3 0 0 0-5.995-.176L9 6.625v.75h6Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-bag', JhIconBag);

package/icons-wc/icon-bars.js

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconBar 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-size-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-size-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-size-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-size-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-size-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 fill-rule="evenodd" d="M4 7a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Zm0 5a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Zm1 4a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2H5Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-bars', JhIconBar);

package/icons-wc/icon-bell-slash.js

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconBellSlash 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-size-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-size-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-size-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-size-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-size-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 fill-rule="evenodd" d="M6.543 6.854 3.97 4.281A.75.75 0 1 1 5.03 3.22l15.247 15.246c.059.019.12.03.18.033a.747.747 0 0 1-.045.103l.618.618a.75.75 0 1 1-1.06 1.06L18.69 19H4.25a.75.75 0 0 1-.53-1.28l1.78-1.78v-5.69a6.17 6.17 0 0 1 1.043-3.397ZM17.19 17.5H6.061l.72-.72.219-.22v-6.308c0-.797.22-1.598.631-2.308L17.19 17.5ZM17 13.184v.006l1.5 1.5v-4.44c0-2.724-1.924-5.42-5-6.092V3.5a1.5 1.5 0 0 0-3 0v.659a6.428 6.428 0 0 0-1.828.702l1.113 1.113c.646-.3 1.39-.474 2.216-.474 3.064 0 5 2.393 5 4.75v2.934ZM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-bell-slash', JhIconBellSlash);

package/icons-wc/icon-bell.js

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconBell 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-size-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-size-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-size-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-size-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-size-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 fill-rule="evenodd" d="M12 2a1.5 1.5 0 0 0-1.5 1.5v.659c-3.075.672-5 3.368-5 6.091v5.69l-1.78 1.78A.75.75 0 0 0 4.25 19h15.5a.75.75 0 0 0 .53-1.28l-1.78-1.78v-5.69c0-2.724-1.925-5.42-5-6.092V3.5A1.5 1.5 0 0 0 12 2Zm-5 8.25C7 7.893 8.936 5.5 12 5.5s5 2.393 5 4.75v6.31l.22.22.72.72H6.06l.72-.72.22-.22v-6.308ZM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-bell', JhIconBell);

package/icons-wc/icon-bolt-auto.js

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconBoltAuto 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-size-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-size-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-size-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-size-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-size-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 fill-rule="evenodd" d="M11.582 2.287A.75.75 0 0 1 12.1 3v7.35h3.75a.75.75 0 0 1 .606 1.191l-7.2 9.9a.75.75 0 0 1-1.356-.44v-7.35H4.15a.75.75 0 0 1-.607-1.192l7.2-9.9a.75.75 0 0 1 .839-.272Zm-5.96 9.863H8.65a.75.75 0 0 1 .75.75v5.794l4.977-6.844H11.35a.75.75 0 0 1-.75-.75V5.307L5.623 12.15Zm11.228 1.1c.3 0 .571.179.69.455l3 7a.75.75 0 1 1-1.38.59l-.662-1.545h-3.296l-.663 1.546a.75.75 0 1 1-1.378-.591l3-7a.75.75 0 0 1 .689-.455Zm-1.006 5h2.011l-1.005-2.346-1.006 2.346Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-bolt-auto', JhIconBoltAuto);