@jack-henry/jh-icons 1.2.0

package/icons-wc/icon-linux.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 JhIconLinux 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.772 6.82c0 .066-.065.066-.065.066h-.065c-.066 0-.066-.065-.13-.13 0 0-.066-.065-.066-.13 0-.066 0-.066.065-.066l.13.065c.066.066.13.13.13.196m-1.237-.652c0-.325-.13-.52-.326-.52 0 0 0 .064-.065.064v.13h.196c0 .131.065.196.065.326h.13m2.345-.325c.13 0 .196.13.261.325h.13c-.065-.065-.065-.13-.065-.195s0-.13-.065-.195c-.065-.066-.13-.13-.195-.13 0 0-.066.064-.13.064 0 .066.064.066.064.13m-2.02 1.043c-.064 0-.064 0-.064-.065s0-.13.065-.196c.13 0 .195-.065.195-.065.066 0 .066.065.066.065 0 .066-.066.13-.196.261h-.065m-.717-.065c-.26-.13-.325-.326-.325-.652 0-.195 0-.325.13-.456a.358.358 0 0 1 .326-.195c.13 0 .195.065.325.195.065.196.13.391.13.587v.13h.066v-.065c.065 0 .065-.13.065-.391 0-.195 0-.39-.13-.586-.13-.196-.261-.326-.522-.326a.49.49 0 0 0-.456.326c-.13.26-.13.456-.13.781 0 .261.065.522.391.782 0-.065.065-.065.13-.13m8.339 9.446c.065 0 .065 0 .065-.065 0-.13-.065-.326-.26-.521-.196-.196-.522-.326-.912-.391h-.261c-.065 0-.195 0-.26-.065.195-.652.26-1.173.26-1.629 0-.651-.13-1.107-.39-1.563-.262-.391-.522-.587-.848-.652-.065.065-.065.065-.065.13.326.13.651.391.847.782.195.456.26.847.26 1.368 0 .391-.065.912-.325 1.629a1.52 1.52 0 0 0-.717.717c0 .065 0 .065.065.065 0 0 .065-.065.13-.196l.326-.325c.196-.13.326-.196.522-.196.325 0 .651.065.846.13a.917.917 0 0 1 .456.261c.066.13.13.195.196.26 0 .196.065.261.065.261M12.358 6.56c-.065-.065-.065-.195-.065-.325 0-.261 0-.391.13-.587.13-.13.261-.195.391-.195.196 0 .326.13.456.26.065.196.13.326.13.522 0 .325-.13.52-.39.586 0 0 .065.065.13.065.13 0 .195.065.326.13.065-.39.13-.651.13-.977 0-.39-.065-.651-.195-.847a.836.836 0 0 0-.652-.26c-.195 0-.39.065-.586.195-.13.196-.196.326-.196.521 0 .326.066.587.196.847.065 0 .13.065.195.065m.782 1.108c-.847.586-1.564.847-2.085.847-.456 0-.912-.196-1.368-.521.065.13.13.26.196.325l.39.391c.261.26.587.391.913.391.456 0 .977-.26 1.693-.717l.587-.39c.13-.13.26-.261.26-.456 0-.066 0-.13-.065-.13 0-.196-.326-.392-.977-.587-.586-.26-1.042-.391-1.368-.391-.196 0-.521.13-.977.39-.391.261-.652.522-.652.783 0 0 .065.065.13.195.391.326.782.521 1.173.521.521 0 1.173-.26 2.085-.912v.13c.065.066.065.13.065.13m1.563 13.486c.261.521.717.782 1.238.782.13 0 .26 0 .391-.065.13 0 .26-.065.326-.13.065-.066.13-.066.195-.13.13-.066.13-.066.196-.131l1.107-.977c.26-.196.521-.391.847-.587l.652-.325c.195-.066.325-.13.456-.26.065-.131.13-.196.13-.392 0-.195-.13-.326-.26-.456s-.261-.195-.392-.195c-.13-.065-.26-.13-.455-.326-.13-.195-.261-.39-.326-.717l-.065-.39c-.066-.196-.066-.326-.13-.391h-.066c-.065 0-.195.065-.26.195l-.391.39c-.065.131-.26.262-.391.392-.196.13-.391.195-.521.195-.522 0-.782-.13-.978-.456-.13-.195-.195-.456-.26-.716-.13-.13-.196-.196-.326-.196-.326 0-.456.326-.456 1.043v2.019c0 .065-.065.195-.065.39-.065.196-.065.457-.065.717l-.13.717m-9.707-.39c.651.064 1.368.26 2.15.586.781.325 1.302.456 1.498.456.456 0 .847-.196 1.173-.587.065-.13.065-.26.065-.456 0-.651-.391-1.433-1.173-2.41l-.456-.587c-.065-.13-.195-.325-.326-.586-.13-.26-.26-.456-.39-.586a1.22 1.22 0 0 0-.391-.456c-.196-.13-.391-.26-.587-.326-.26.065-.456.13-.586.26-.13.131-.13.261-.13.392 0 .13-.066.26-.13.26-.066.065-.196.065-.326.13h-.391c-.326 0-.587.066-.717.13a.836.836 0 0 0-.26.652c0 .13 0 .26.065.521s.065.456.065.587c0 .26-.065.52-.26.847-.196.26-.261.52-.261.651.13.26.586.456 1.368.521m2.215-6.058c0-.456.13-.978.39-1.564.261-.586.457-.977.717-1.238 0-.065-.065-.065-.13-.065l-.065-.13c-.196.195-.456.651-.717 1.368-.26.586-.456 1.173-.456 1.564 0 .325.065.586.196.781.13.196.52.521 1.042.978l.716.456c.782.65 1.173 1.107 1.173 1.368 0 .13-.065.26-.26.456-.13.13-.326.26-.456.26v.065l.195.391c.26.391.912.587 1.694.587 1.498 0 2.606-.587 3.453-1.825 0-.325 0-.52-.066-.651v-.26c0-.457.066-.782.196-.978.13-.195.26-.326.456-.326.13 0 .26.066.39.13.066-.52.066-.977.066-1.367 0-.587 0-1.108-.13-1.564a3.435 3.435 0 0 0-.326-.977l-.391-.586c-.13-.196-.195-.391-.326-.587-.065-.26-.13-.456-.13-.781-.195-.326-.326-.652-.521-.978-.13-.325-.26-.651-.391-.912l-.586.456c-.652.456-1.173.652-1.694.652-.391 0-.717-.065-.912-.326l-.391-.326c0 .196-.065.456-.196.717l-.39.782c-.196.456-.261.716-.326.912 0 .13-.065.26-.065.26l-.522.978c-.52.977-.846 1.954-.846 2.67 0 .13 0 .326.065.457-.326-.196-.456-.457-.456-.847m4.82 6.319c-.846 0-1.563.13-2.019.326-.326.39-.717.586-1.238.586-.326 0-.847-.13-1.563-.391-.717-.26-1.303-.456-1.89-.521-.065 0-.195-.065-.39-.065-.196 0-.391-.065-.522-.065-.13 0-.325-.066-.456-.13-.195-.066-.325-.131-.39-.196a.494.494 0 0 1-.13-.26c0-.131 0-.196.064-.326a.887.887 0 0 1 .196-.261c.065-.065.065-.13.13-.195.065-.066.065-.13.065-.196 0-.065.065-.13.065-.195v-.196c0-.065 0-.26-.065-.651-.065-.326-.065-.587-.065-.652 0-.326.065-.52.195-.716.13-.196.261-.261.457-.261h.781c.065 0 .13-.065.326-.13.065-.13.065-.196.13-.26.065-.066.065-.131.065-.196s0-.065.066-.13a.14.14 0 0 1 .13-.13c-.065-.066-.065-.131-.065-.261v-.196c0-.26.13-.586.325-1.042l.261-.391.456-.912c.13-.26.26-.652.391-1.173.13-.456.39-.912.782-1.433l.52-.586c.327-.391.587-.717.718-.978.13-.26.195-.586.195-.846 0-.13-.065-.522-.13-1.173-.065-.652-.13-1.368-.13-1.954 0-.457.065-.782.13-1.108.065-.326.26-.651.456-.912.195-.26.456-.521.847-.651.39-.13.846-.196 1.433-.196.195 0 .39 0 .586.065.196 0 .456.065.782.196.26.13.521.26.716.456.13.13.391.456.587.781.13.391.26.782.326 1.369.065.325.065.651.13 1.107 0 .39.065.651.065.847.065.195.065.456.13.782.065.26.13.52.26.716.131.26.261.521.457.782.195.326.456.651.716 1.042.587.652 1.043 1.434 1.369 2.15.325.652.52 1.564.52 2.476 0 .456-.064.912-.195 1.368.13 0 .196.065.26.13.066.065.131.326.196.587l.066.52c.065.13.13.261.325.392.13.13.26.195.456.325.13.065.326.13.456.26.13.131.196.261.196.392a.74.74 0 0 1-.196.52c-.13.131-.26.196-.456.261l-.781.391c-.326.196-.652.456-.978.717l-.651.586c-.26.26-.521.456-.717.587-.195.13-.456.195-.716.195l-.456-.065c-.522-.13-.847-.391-1.043-.847-1.172 0-2.02-.065-2.54-.065" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-linux', JhIconLinux);

package/icons-wc/icon-list-ul-pen.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 JhIconListUlPen 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.487 5.32a.75.75 0 0 0-.997.363l-4.17 8.942a.75.75 0 0 0-.061.43l.467 3.058a.75.75 0 0 0 1.131.528l2.643-1.608a.75.75 0 0 0 .29-.324l4.17-8.942a.75.75 0 0 0-.363-.996l-3.11-1.45Zm-3.711 9.733 3.756-8.056 1.751.816-3.757 8.057-1.487.905-.263-1.722ZM10 6h4.963l-.933 2H10a1 1 0 0 1 0-2Zm0 5h2.632l-.933 2H10a1 1 0 0 1 0-2Zm0 5h1.139l.305 2H10a1 1 0 0 1 0-2ZM5 8.5h1a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1Zm1 5H5a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1Zm-1 5h1a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-list-ul-pen', JhIconListUlPen);

package/icons-wc/icon-list-ul-to-left.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 JhIconListUlToLeft 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="M19.5 8.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM15 6.25a.75.75 0 0 1 0 1.5H4a.75.75 0 0 1 0-1.5h11Zm.75 5.75a.75.75 0 0 0-.75-.75H4a.75.75 0 1 0 0 1.5h11a.75.75 0 0 0 .75-.75Zm3.75 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM15.75 17a.75.75 0 0 0-.75-.75H4a.75.75 0 1 0 0 1.5h11a.75.75 0 0 0 .75-.75Zm3.75 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-list-ul-to-left', JhIconListUlToLeft);

package/icons-wc/icon-list-ul.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 JhIconListUl 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.5 8.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3ZM9 6.25a.75.75 0 0 0 0 1.5h11a.75.75 0 0 0 0-1.5H9ZM8.25 12a.75.75 0 0 1 .75-.75h11a.75.75 0 1 1 0 1.5H9a.75.75 0 0 1-.75-.75ZM4.5 13.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3ZM8.25 17a.75.75 0 0 1 .75-.75h11a.75.75 0 1 1 0 1.5H9a.75.75 0 0 1-.75-.75ZM4.5 18.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-list-ul', JhIconListUl);

package/icons-wc/icon-location-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 JhIconLocationSlash 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="M3.323 3.323a.749.749 0 0 0 .147.207l16 16a.748.748 0 0 0 .207.147.75.75 0 0 1-1.207.853l-2.93-2.93a46.869 46.869 0 0 1-2.9 3.806l-.055.064-.015.017-.004.005-.001.001L12 21l-.565.494-.001-.002-.004-.005-.015-.017-.055-.064a42.936 42.936 0 0 1-.932-1.136c-.6-.756-1.4-1.814-2.202-3.017-.8-1.2-1.612-2.56-2.225-3.918C5.393 11.99 4.95 10.581 4.95 9.3c0-.683.105-1.352.3-1.989l-2.78-2.78a.75.75 0 0 1 .853-1.208Zm3.41 1.35 1.063 1.063C8.816 4.539 10.326 3.75 12 3.75c3.049 0 5.55 2.615 5.55 5.55 0 .969-.345 2.148-.918 3.418a20.06 20.06 0 0 1-.615 1.239l1.105 1.105a22.24 22.24 0 0 0 .877-1.727c.608-1.346 1.051-2.754 1.051-4.035 0-3.743-3.152-7.05-7.05-7.05-2.096 0-3.976.956-5.267 2.422Zm7.223 7.222A3.247 3.247 0 0 0 15.25 9.3 3.253 3.253 0 0 0 12 6.05c-1.06 0-2.001.509-2.595 1.295l1.08 1.08A1.752 1.752 0 0 1 12 7.55c.964 0 1.75.786 1.75 1.75 0 .646-.352 1.211-.875 1.515l1.08 1.08ZM12 21l-.564.494.564.645.564-.645L12 21ZM6.45 9.3c0-.248.018-.494.053-.737l7.957 7.957A44.97 44.97 0 0 1 12 19.832a45.404 45.404 0 0 1-2.526-3.41c-.774-1.162-1.538-2.447-2.106-3.704-.573-1.27-.918-2.45-.918-3.418Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-location-slash', JhIconLocationSlash);

package/icons-wc/icon-location.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 JhIconLocation 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-3.898 0-7.05 3.307-7.05 7.05 0 1.281.443 2.69 1.05 4.035.614 1.359 1.426 2.718 2.226 3.918a46.25 46.25 0 0 0 3.134 4.153l.055.064.015.017.004.005.001.001L12 21l-.564.494.564.645.564-.645L12 21l.565.494.001-.002.004-.005.015-.017.055-.064c.048-.056.118-.137.206-.243a46.226 46.226 0 0 0 2.928-3.91c.8-1.2 1.612-2.56 2.225-3.918.608-1.346 1.051-2.754 1.051-4.035 0-3.743-3.152-7.05-7.05-7.05Zm.397 17.089c-.146.183-.28.349-.397.493a45.404 45.404 0 0 1-2.526-3.41c-.774-1.162-1.538-2.447-2.106-3.704-.573-1.27-.918-2.45-.918-3.418 0-2.935 2.501-5.55 5.55-5.55s5.55 2.615 5.55 5.55c0 .969-.345 2.148-.918 3.418-.568 1.257-1.332 2.542-2.106 3.704a44.834 44.834 0 0 1-2.13 2.917ZM10.25 9.3c0-.964.786-1.75 1.75-1.75s1.75.786 1.75 1.75-.786 1.75-1.75 1.75-1.75-.786-1.75-1.75ZM12 6.05A3.253 3.253 0 0 0 8.75 9.3 3.253 3.253 0 0 0 12 12.55a3.253 3.253 0 0 0 3.25-3.25A3.253 3.253 0 0 0 12 6.05Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-location', JhIconLocation);

package/icons-wc/icon-lock.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 JhIconLock 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 4.25c-1.912 0-3.25 1.68-3.25 3.25v2.25h6.5V7.5c0-1.568-1.35-3.25-3.25-3.25ZM7.25 7.5v2.25H5a.75.75 0 0 0-.75.75v10c0 .414.336.75.75.75h14a.75.75 0 0 0 .75-.75v-10a.75.75 0 0 0-.75-.75h-2.25V7.5c0-2.289-1.917-4.75-4.75-4.75-2.848 0-4.75 2.463-4.75 4.75Zm11 3.75H5.75v8.5h12.5v-8.5ZM13 16.232a2 2 0 1 0-2 0V18.5h2v-2.268Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-lock', JhIconLock);