@vaadin/icon 22.0.15 → 22.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/icon",
-  "version": "22.0.15",
+  "version": "22.0.18",
   "publishConfig": {
     "access": "public"
   },
@@ -32,13 +32,13 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^22.0.15",
-    "@vaadin/vaadin-lumo-styles": "^22.0.15",
-    "@vaadin/vaadin-themable-mixin": "^22.0.15",
+    "@vaadin/component-base": "^22.0.18",
+    "@vaadin/vaadin-lumo-styles": "^22.0.18",
+    "@vaadin/vaadin-themable-mixin": "^22.0.18",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@vaadin/testing-helpers": "^0.3.2"
   },
-  "gitHead": "bba021b56ba45da93d2bb980242956ad929ecfe2"
+  "gitHead": "8f5d45192adbb084661af01c8837d0898cd68a23"
 }

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,
     };
   }
 
@@ -179,7 +182,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 +219,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,
+    };
   }
 
   /**