@vaadin/icon 24.4.0-alpha22 → 24.4.0-alpha23

package/src/vaadin-iconset.js

@@ -6,43 +6,17 @@
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-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;
-  }, {});
-}
+import { IconsetMixin } from './vaadin-iconset-mixin.js';
 
 /**
  * `<vaadin-iconset>` is a Web Component for creating SVG icon collections.
  *
  * @customElement
  * @extends HTMLElement
+ * @mixes IconsetMixin
  * @mixes ElementMixin
  */
-class Iconset extends ElementMixin(PolymerElement) {
+class Iconset extends IconsetMixin(ElementMixin(PolymerElement)) {
   static get template() {
     return null;
   }
@@ -50,140 +24,6 @@ class Iconset extends ElementMixin(PolymerElement) {
   static get is() {
     return 'vaadin-iconset';
   }
-
-  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',
-      },
-
-      /**
-       * 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,
-      },
-    };
-  }
-
-  /**
-   * 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);
-    }
-  }
 }
 
 defineCustomElement(Iconset);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/icon",
-  "version": "24.4.0-alpha22",
+  "version": "24.4.0-alpha23",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -12,7 +12,7 @@
           "attributes": [
             {
               "name": "name",
-              "description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha22/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
+              "description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
               "value": {
                 "type": [
                   "string",
@@ -48,7 +48,7 @@
             "properties": [
               {
                 "name": "name",
-                "description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha22/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
+                "description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
                 "value": {
                   "type": [
                     "string",
@@ -74,14 +74,79 @@
         },
         {
           "name": "vaadin-icon",
-          "description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha22/#/elements/vaadin-icon#property-svg) property. In this case you can also\ndefine the size of the SVG `viewBox` using the [`size`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha22/#/elements/vaadin-icon#property-size) property:\n\n```js\nimport { html, svg } from 'lit';\n\n// in your component\nrender() {\n  const svgIcon = svg`<path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>`;\n  return html`\n    <vaadin-icon\n      .svg=\"${svgIcon}\"\n      size=\"16\"\n    ></vaadin-icon>\n  `;\n}\n```",
+          "description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-icon#property-svg) property. In this case you can also\ndefine the size of the SVG `viewBox` using the [`size`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-icon#property-size) property:\n\n```js\nimport { html, svg } from 'lit';\n\n// in your component\nrender() {\n  const svgIcon = svg`<path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>`;\n  return html`\n    <vaadin-icon\n      .svg=\"${svgIcon}\"\n      size=\"16\"\n    ></vaadin-icon>\n  `;\n}\n```",
           "attributes": [
             {
-              "name": "class",
-              "description": "",
+              "name": "icon",
+              "description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
               "value": {
                 "type": [
-                  ""
+                  "string"
+                ]
+              }
+            },
+            {
+              "name": "src",
+              "description": "The SVG source to be loaded as the icon. It can be:\n- an URL to a file containing the icon\n- an URL in the format \"/path/to/file.svg#objectID\", where the \"objectID\" refers to an ID attribute contained\n  inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.\n- a string in the format \"data:image/svg+xml,<svg>...</svg>\". You may need to use the \"encodeURIComponent\"\n  function for the SVG content passed",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
+            {
+              "name": "symbol",
+              "description": "The symbol identifier that references an ID of an element contained in the SVG element assigned to the\n`src` property",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
+            {
+              "name": "icon-class",
+              "description": "Class names defining an icon font and/or a specific glyph inside an icon font.\n\nExample: \"fa-solid fa-user\"",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
+            {
+              "name": "char",
+              "description": "A hexadecimal code point that specifies a glyph from an icon font.\n\nExample: \"e001\"",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
+            {
+              "name": "ligature",
+              "description": "A ligature name that specifies an icon from an icon font with support for ligatures.\n\nExample: \"home\".",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
+            {
+              "name": "font-family",
+              "description": "The font family to use for the font icon.",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
+            {
+              "name": "size",
+              "description": "The size of an icon, used to set the `viewBox` attribute.",
+              "value": {
+                "type": [
+                  "number",
+                  "null",
+                  "undefined"
                 ]
               }
             },
@@ -101,7 +166,7 @@
             "properties": [
               {
                 "name": "icon",
-                "description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha22/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
+                "description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
                 "value": {
                   "type": [
                     "string"

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/icon",
-  "version": "24.4.0-alpha22",
+  "version": "24.4.0-alpha23",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -21,7 +21,7 @@
           "attributes": [
             {
               "name": ".name",
-              "description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha22/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
+              "description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
               "value": {
                 "kind": "expression"
               }
@@ -37,12 +37,12 @@
         },
         {
           "name": "vaadin-icon",
-          "description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha22/#/elements/vaadin-icon#property-svg) property. In this case you can also\ndefine the size of the SVG `viewBox` using the [`size`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha22/#/elements/vaadin-icon#property-size) property:\n\n```js\nimport { html, svg } from 'lit';\n\n// in your component\nrender() {\n  const svgIcon = svg`<path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>`;\n  return html`\n    <vaadin-icon\n      .svg=\"${svgIcon}\"\n      size=\"16\"\n    ></vaadin-icon>\n  `;\n}\n```",
+          "description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-icon#property-svg) property. In this case you can also\ndefine the size of the SVG `viewBox` using the [`size`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-icon#property-size) property:\n\n```js\nimport { html, svg } from 'lit';\n\n// in your component\nrender() {\n  const svgIcon = svg`<path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>`;\n  return html`\n    <vaadin-icon\n      .svg=\"${svgIcon}\"\n      size=\"16\"\n    ></vaadin-icon>\n  `;\n}\n```",
           "extension": true,
           "attributes": [
             {
               "name": ".icon",
-              "description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha22/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
+              "description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
               "value": {
                 "kind": "expression"
               }