@vaadin/icon 23.1.0-rc3 → 23.2.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/icon",
-  "version": "23.1.0-rc3",
+  "version": "23.2.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -33,13 +33,13 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.1.0-rc3",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-rc3",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-rc3",
+    "@vaadin/component-base": "23.2.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha1",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@vaadin/testing-helpers": "^0.3.2"
   },
-  "gitHead": "49c312fbe0228adb559296d45655bbfd4eac6235"
+  "gitHead": "f226a2976c270d3d53c824f6e0a740a5d3382d91"
 }

package/src/vaadin-icon.js

@@ -83,7 +83,7 @@ class Icon extends ThemableMixin(ElementMixin(PolymerElement)) {
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
-        viewBox="[[__computeViewBox(size)]]"
+        viewBox="[[__computeViewBox(size, __viewBox)]]"
         preserveAspectRatio="xMidYMid meet"
         aria-hidden="true"
       ></svg>
@@ -128,6 +128,9 @@ class Icon extends ThemableMixin(ElementMixin(PolymerElement)) {
 
       /** @private */
       __svgElement: Object,
+
+      /** @private */
+      __viewBox: String,
     };
   }
 
@@ -163,11 +166,13 @@ class Icon extends ThemableMixin(ElementMixin(PolymerElement)) {
     }
   }
 
+  /** @protected */
   connectedCallback() {
     super.connectedCallback();
     document.addEventListener('vaadin-iconset-registered', this.__onIconsetRegistered);
   }
 
+  /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener('vaadin-iconset-registered', this.__onIconsetRegistered);
@@ -179,7 +184,10 @@ class Icon extends ThemableMixin(ElementMixin(PolymerElement)) {
       this.__checkDeprecatedIcon(icon);
       const iconsetName = this.__getIconsetName(icon);
       const iconset = Iconset.getIconset(iconsetName);
-      const { svg, size } = iconset.applyIcon(icon);
+      const { svg, size, viewBox } = iconset.applyIcon(icon);
+      if (viewBox) {
+        this.__viewBox = viewBox;
+      }
       if (size !== this.size) {
         this.size = size;
       }
@@ -213,8 +221,8 @@ class Icon extends ThemableMixin(ElementMixin(PolymerElement)) {
   }
 
   /** @private */
-  __computeViewBox(size) {
-    return `0 0 ${size} ${size}`;
+  __computeViewBox(size, viewBox) {
+    return viewBox || `0 0 ${size} ${size}`;
   }
 }
 

package/src/vaadin-iconset.d.ts

@@ -35,7 +35,7 @@ declare class Iconset extends ElementMixin(HTMLElement) {
    * Produce SVGTemplateResult for the element matching `name` in this
    * iconset, or `undefined` if there is no matching element.
    */
-  applyIcon(name: string): { svg: IconSvgLiteral; size: number };
+  applyIcon(name: string): { svg: IconSvgLiteral; size: number; viewBox: string | null };
 }
 
 declare global {

package/src/vaadin-iconset.js

@@ -82,7 +82,12 @@ class Iconset extends ElementMixin(PolymerElement) {
     // Create the icon map on-demand, since the iconset itself has no discrete
     // signal to know when it's children are fully parsed
     this._icons = this._icons || this.__createIconMap();
-    return { svg: cloneSvgNode(this._icons[this.__getIconId(name)]), size: this.size };
+    const icon = this._icons[this.__getIconId(name)];
+    return {
+      svg: cloneSvgNode(icon),
+      size: this.size,
+      viewBox: icon ? icon.getAttribute('viewBox') : null,
+    };
   }
 
   /**