@vaadin/icon 24.4.0-dev.b3e1d14600 → 24.5.0-alpha1

package/src/vaadin-icon.js

@@ -1,20 +1,18 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import './vaadin-iconset.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
-import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { IconFontSizeMixin } from './vaadin-icon-font-size-mixin.js';
-import { ensureSvgLiteral, renderSvg, unsafeSvgLiteral } from './vaadin-icon-svg.js';
-import { Iconset } from './vaadin-iconset.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { IconMixin } from './vaadin-icon-mixin.js';
+import { iconStyles } from './vaadin-icon-styles.js';
 
-const srcCache = new Map();
+registerStyles('vaadin-icon', iconStyles, { moduleId: 'vaadin-icon-styles' });
 
 /**
  * `<vaadin-icon>` is a Web Component for displaying SVG icons.
@@ -57,55 +55,14 @@ const srcCache = new Map();
  *
  * @customElement
  * @extends HTMLElement
+ * @mixes IconMixin
  * @mixes ControllerMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
- * @mixes SlotStylesMixin
- * @mixes IconFontSizeMixin
  */
-class Icon extends ThemableMixin(ElementMixin(ControllerMixin(SlotStylesMixin(IconFontSizeMixin(PolymerElement))))) {
+class Icon extends IconMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
   static get template() {
     return html`
-      <style>
-        :host {
-          display: inline-flex;
-          justify-content: center;
-          align-items: center;
-          box-sizing: border-box;
-          vertical-align: middle;
-          width: 24px;
-          height: 24px;
-          fill: currentColor;
-          container-type: size;
-        }
-
-        :host::after,
-        :host::before {
-          line-height: 1;
-          font-size: 100cqh;
-          -webkit-font-smoothing: antialiased;
-          text-rendering: optimizeLegibility;
-          -moz-osx-font-smoothing: grayscale;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        svg {
-          display: block;
-          width: 100%;
-          height: 100%;
-        }
-
-        :host(:is([icon-class], [font-icon-content])) svg {
-          display: none;
-        }
-
-        :host([font-icon-content])::before {
-          content: attr(font-icon-content);
-        }
-      </style>
       <svg
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
@@ -132,350 +89,6 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(SlotStylesMixin(Ic
   static get is() {
     return 'vaadin-icon';
   }
-
-  static get properties() {
-    return {
-      /**
-       * The name of the icon to use. The name should be of the form:
-       * `iconset_name:icon_name`. When using `vaadin-icons` it is possible
-       * to omit the first part and only use `icon_name` as a value.
-       *
-       * Setting the `icon` property updates the `svg` and `size` based on the
-       * values provided by the corresponding `vaadin-iconset` element.
-       *
-       * See also [`name`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.
-       *
-       * @attr {string} icon
-       * @type {string}
-       */
-      icon: {
-        type: String,
-        reflectToAttribute: true,
-        observer: '__iconChanged',
-      },
-
-      /**
-       * The SVG icon wrapped in a Lit template literal.
-       */
-      svg: {
-        type: Object,
-      },
-
-      /**
-       * The SVG source to be loaded as the icon. It can be:
-       * - an URL to a file containing the icon
-       * - an URL in the format "/path/to/file.svg#objectID", where the "objectID" refers to an ID attribute contained
-       *   inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.
-       * - a string in the format "data:image/svg+xml,<svg>...</svg>". You may need to use the "encodeURIComponent"
-       *   function for the SVG content passed
-       *
-       * @type {string}
-       */
-      src: {
-        type: String,
-      },
-
-      /**
-       * The symbol identifier that references an ID of an element contained in the SVG element assigned to the
-       * `src` property
-       *
-       * @type {string}
-       */
-      symbol: {
-        type: String,
-      },
-
-      /**
-       * Class names defining an icon font and/or a specific glyph inside an icon font.
-       *
-       * Example: "fa-solid fa-user"
-       *
-       * @attr {string} icon-class
-       * @type {string}
-       */
-      iconClass: {
-        type: String,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * A hexadecimal code point that specifies a glyph from an icon font.
-       *
-       * Example: "e001"
-       *
-       * @type {string}
-       */
-      char: {
-        type: String,
-      },
-
-      /**
-       * A ligature name that specifies an icon from an icon font with support for ligatures.
-       *
-       * Example: "home".
-       *
-       * @type {string}
-       */
-      ligature: {
-        type: String,
-      },
-
-      /**
-       * The font family to use for the font icon.
-       *
-       * @type {string}
-       */
-      fontFamily: {
-        type: String,
-        observer: '__fontFamilyChanged',
-      },
-
-      /**
-       * The size of an icon, used to set the `viewBox` attribute.
-       */
-      size: {
-        type: Number,
-        value: 24,
-      },
-
-      /** @private */
-      __defaultPAR: {
-        type: String,
-        value: 'xMidYMid meet',
-      },
-
-      /** @private */
-      __preserveAspectRatio: String,
-
-      /** @private */
-      __useRef: Object,
-
-      /** @private */
-      __svgElement: String,
-
-      /** @private */
-      __viewBox: String,
-
-      /** @private */
-      __fill: String,
-
-      /** @private */
-      __stroke: String,
-
-      /** @private */
-      __strokeWidth: String,
-
-      /** @private */
-      __strokeLinecap: String,
-
-      /** @private */
-      __strokeLinejoin: String,
-    };
-  }
-
-  static get observers() {
-    return ['__svgChanged(svg, __svgElement)', '__fontChanged(iconClass, char, ligature)', '__srcChanged(src, symbol)'];
-  }
-
-  static get observedAttributes() {
-    return [...super.observedAttributes, 'class'];
-  }
-
-  constructor() {
-    super();
-
-    this.__fetch = fetch.bind(window);
-  }
-
-  /** @protected */
-  get slotStyles() {
-    const tag = this.localName;
-    return [
-      `
-        ${tag}[icon-class] {
-          display: inline-flex;
-          vertical-align: middle;
-          font-size: inherit;
-        }
-      `,
-    ];
-  }
-
-  /** @private */
-  get __iconClasses() {
-    return this.iconClass ? this.iconClass.split(' ') : [];
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-    this.__svgElement = this.shadowRoot.querySelector('#svg-group');
-
-    this._tooltipController = new TooltipController(this);
-    this.addController(this._tooltipController);
-  }
-
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-
-    Iconset.attachedIcons.add(this);
-  }
-
-  /** @protected */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    Iconset.attachedIcons.delete(this);
-  }
-
-  /** @protected */
-  _applyIcon() {
-    const { preserveAspectRatio, svg, size, viewBox } = Iconset.getIconSvg(this.icon);
-
-    if (viewBox) {
-      this.__viewBox = viewBox;
-    }
-
-    if (preserveAspectRatio) {
-      this.__preserveAspectRatio = preserveAspectRatio;
-    }
-
-    if (size && size !== this.size) {
-      this.size = size;
-    }
-
-    this.svg = svg;
-  }
-
-  /** @private */
-  __iconChanged(icon) {
-    if (icon) {
-      this._applyIcon();
-    } else {
-      this.svg = ensureSvgLiteral(null);
-    }
-  }
-
-  /** @private */
-  async __srcChanged(src, symbol) {
-    if (!src) {
-      this.svg = null;
-      return;
-    }
-
-    // Need to add the "icon" attribute to avoid issues as described in
-    // https://github.com/vaadin/web-components/issues/6301
-    this.icon = '';
-
-    if (!src.startsWith('data:') && (symbol || src.includes('#'))) {
-      const [path, iconId] = src.split('#');
-      this.__useRef = `${path}#${symbol || iconId}`;
-    } else {
-      try {
-        if (!srcCache.has(src)) {
-          srcCache.set(
-            src,
-            this.__fetch(src, { mode: 'cors' }).then((data) => {
-              if (!data.ok) {
-                throw new Error('Error loading icon');
-              }
-              return data.text();
-            }),
-          );
-        }
-        const svgData = await srcCache.get(src);
-
-        if (!Icon.__domParser) {
-          Icon.__domParser = new DOMParser();
-        }
-        const parsedResponse = Icon.__domParser.parseFromString(svgData, 'text/html');
-
-        const svgElement = parsedResponse.querySelector('svg');
-        if (!svgElement) {
-          throw new Error(`SVG element not found on path: ${src}`);
-        }
-
-        this.svg = unsafeSvgLiteral(svgElement.innerHTML);
-
-        if (symbol) {
-          this.__useRef = `#${symbol}`;
-        }
-
-        this.__viewBox = svgElement.getAttribute('viewBox');
-        this.__fill = svgElement.getAttribute('fill');
-        this.__stroke = svgElement.getAttribute('stroke');
-        this.__strokeWidth = svgElement.getAttribute('stroke-width');
-        this.__strokeLinecap = svgElement.getAttribute('stroke-linecap');
-        this.__strokeLinejoin = svgElement.getAttribute('stroke-linejoin');
-      } catch (e) {
-        console.error(e);
-        this.svg = null;
-      }
-    }
-  }
-
-  /** @private */
-  __svgChanged(svg, svgElement) {
-    if (!svgElement) {
-      return;
-    }
-
-    renderSvg(svg, svgElement);
-  }
-
-  /** @private */
-  __computePAR(defaultPAR, preserveAspectRatio) {
-    return preserveAspectRatio || defaultPAR;
-  }
-
-  /** @private */
-  __computeVisibility(__useRef) {
-    return __useRef ? 'visible' : 'hidden';
-  }
-
-  /** @private */
-  __computeViewBox(size, viewBox) {
-    return viewBox || `0 0 ${size} ${size}`;
-  }
-
-  /** @private */
-  __fontChanged(iconClass, char, ligature) {
-    this.classList.remove(...(this.__addedIconClasses || []));
-    if (iconClass) {
-      this.__addedIconClasses = [...this.__iconClasses];
-      this.classList.add(...this.__addedIconClasses);
-    }
-
-    if (char) {
-      this.setAttribute('font-icon-content', char.length > 1 ? String.fromCodePoint(parseInt(char, 16)) : char);
-    } else if (ligature) {
-      this.setAttribute('font-icon-content', ligature);
-    } else {
-      this.removeAttribute('font-icon-content');
-    }
-
-    if ((iconClass || char || ligature) && !this.icon) {
-      // The "icon" attribute needs to be set on the host also when using font icons
-      // to avoid issues such as https://github.com/vaadin/web-components/issues/6301
-      this.icon = '';
-    }
-  }
-
-  /** @protected */
-  attributeChangedCallback(name, oldValue, newValue) {
-    super.attributeChangedCallback(name, oldValue, newValue);
-
-    // Make sure class list always contains all the font class names
-    if (name === 'class' && this.__iconClasses.some((className) => !this.classList.contains(className))) {
-      this.classList.add(...this.__iconClasses);
-    }
-  }
-
-  /** @private */
-  __fontFamilyChanged(fontFamily) {
-    this.style.fontFamily = `'${fontFamily}'`;
-  }
 }
 
 defineCustomElement(Icon);

package/src/vaadin-iconset-mixin.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+
+/**
+ * A mixin providing common iconset functionality.
+ */
+export declare function IconsetMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<IconsetMixinClass> & T;
+
+export declare class IconsetMixinClass {
+  /**
+   * The name of the iconset. Every iconset is required to have its own unique name.
+   * All the SVG icons in the iconset must have IDs conforming to its name.
+   *
+   * See also [`name`](#/elements/vaadin-icon#property-name) property of `vaadin-icon`.
+   */
+  name: string;
+
+  /**
+   * The size of an individual icon. Note that icons must be square.
+   *
+   * When using `vaadin-icon`, the size of the iconset will take precedence
+   * over the size defined by the user to ensure correct appearance.
+   */
+  size: number;
+}

package/src/vaadin-iconset-mixin.js

@@ -0,0 +1,169 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { cloneSvgNode } from './vaadin-icon-svg.js';
+
+const iconsetRegistry = {};
+
+const attachedIcons = new Set();
+
+function getIconId(id, name) {
+  return (id || '').replace(`${name}:`, '');
+}
+
+function getIconsetName(icon) {
+  if (!icon) {
+    return;
+  }
+  const parts = icon.split(':');
+
+  // Use "vaadin" as a fallback
+  return parts[0] || 'vaadin';
+}
+
+function initIconsMap(iconset, name) {
+  iconset._icons = [...iconset.querySelectorAll('[id]')].reduce((map, svg) => {
+    const key = getIconId(svg.id, name);
+    map[key] = svg;
+    return map;
+  }, {});
+}
+
+/**
+ * @polymerMixin
+ */
+export const IconsetMixin = (superClass) =>
+  class extends superClass {
+    static get properties() {
+      return {
+        /**
+         * The name of the iconset. Every iconset is required to have its own unique name.
+         * All the SVG icons in the iconset must have IDs conforming to its name.
+         *
+         * See also [`name`](#/elements/vaadin-icon#property-name) property of `vaadin-icon`.
+         */
+        name: {
+          type: String,
+          observer: '__nameChanged',
+          sync: true,
+        },
+        /**
+         * The size of an individual icon. Note that icons must be square.
+         *
+         * When using `vaadin-icon`, the size of the iconset will take precedence
+         * over the size defined by the user to ensure correct appearance.
+         */
+        size: {
+          type: Number,
+          value: 24,
+          sync: true,
+        },
+      };
+    }
+
+    /**
+     * Set of the `vaadin-icon` instances in the DOM.
+     *
+     * @return {Set<Icon>}
+     */
+    static get attachedIcons() {
+      return attachedIcons;
+    }
+
+    /**
+     * Returns an instance of the iconset by its name.
+     *
+     * @param {string} name
+     * @return {Iconset}
+     */
+    static getIconset(name) {
+      return iconsetRegistry[name];
+    }
+
+    /**
+     * Returns SVGTemplateResult for the `icon` ID matching `name` of the
+     * iconset, or `nothing` literal if there is no matching icon found.
+     *
+     * @param {string} icon
+     * @param {?string} name
+     */
+    static getIconSvg(icon, name) {
+      const iconsetName = name || getIconsetName(icon);
+      const iconset = this.getIconset(iconsetName);
+      if (!icon || !iconset) {
+        // Missing icon, return `nothing` literal.
+        return {
+          svg: cloneSvgNode(null),
+        };
+      }
+      const iconId = getIconId(icon, iconsetName);
+      const iconSvg = iconset._icons[iconId];
+      return {
+        preserveAspectRatio: iconSvg ? iconSvg.getAttribute('preserveAspectRatio') : null,
+        svg: cloneSvgNode(iconSvg),
+        size: iconset.size,
+        viewBox: iconSvg ? iconSvg.getAttribute('viewBox') : null,
+      };
+    }
+
+    /**
+     * Register an iconset without adding to the DOM.
+     *
+     * @param {string} name
+     * @param {number} size
+     * @param {?HTMLTemplateElement} template
+     */
+    static register(name, size, template) {
+      if (!iconsetRegistry[name]) {
+        const iconset = document.createElement('vaadin-iconset');
+        iconset.appendChild(template.content.cloneNode(true));
+        iconsetRegistry[name] = iconset;
+        initIconsMap(iconset, name);
+        iconset.size = size;
+        iconset.name = name;
+
+        // Call this function manually instead of using observer
+        // to make it work without appending element to the DOM.
+        iconset.__nameChanged(name);
+      }
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+      this.style.display = 'none';
+
+      // Store reference and init icons.
+      const { name } = this;
+      iconsetRegistry[name] = this;
+      initIconsMap(this, name);
+      this.__updateIcons(name);
+    }
+
+    /**
+     * Update all the icons instances in the DOM.
+     *
+     * @param {string} name
+     * @private
+     */
+    __updateIcons(name) {
+      attachedIcons.forEach((element) => {
+        if (name === getIconsetName(element.icon)) {
+          element._applyIcon();
+        }
+      });
+    }
+
+    /** @private */
+    __nameChanged(name, oldName) {
+      if (oldName) {
+        iconsetRegistry[name] = iconsetRegistry[oldName];
+        delete iconsetRegistry[oldName];
+      }
+      if (name) {
+        this.__updateIcons(name);
+      }
+    }
+  };

package/src/vaadin-iconset.d.ts

@@ -1,16 +1,17 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import type { Icon } from './vaadin-icon.js';
 import type { IconSvgLiteral } from './vaadin-icon-svg.js';
+import { IconsetMixin } from './vaadin-iconset-mixin.js';
 
 /**
  * `<vaadin-iconset>` is a Web Component for creating SVG icon collections.
  */
-declare class Iconset extends ElementMixin(HTMLElement) {
+declare class Iconset extends ElementMixin(IconsetMixin(HTMLElement)) {
   /**
    * Set of the `vaadin-icon` instances in the DOM.
    */
@@ -39,22 +40,6 @@ declare class Iconset extends ElementMixin(HTMLElement) {
     size?: number;
     viewBox?: string | null;
   };
-
-  /**
-   * The name of the iconset. Every iconset is required to have its own unique name.
-   * All the SVG icons in the iconset must have IDs conforming to its name.
-   *
-   * See also [`name`](#/elements/vaadin-icon#property-name) property of `vaadin-icon`.
-   */
-  name: string;
-
-  /**
-   * The size of an individual icon. Note that icons must be square.
-   *
-   * When using `vaadin-icon`, the size of the iconset will take precedence
-   * over the size defined by the user to ensure correct appearance.
-   */
-  size: number;
 }
 
 declare global {