@vaadin/icon 22.0.14 → 22.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/icon",
-  "version": "22.0.14",
+  "version": "22.0.17",
   "publishConfig": {
     "access": "public"
   },
@@ -32,13 +32,13 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^22.0.14",
-    "@vaadin/vaadin-lumo-styles": "^22.0.14",
-    "@vaadin/vaadin-themable-mixin": "^22.0.14",
+    "@vaadin/component-base": "^22.0.17",
+    "@vaadin/vaadin-lumo-styles": "^22.0.17",
+    "@vaadin/vaadin-themable-mixin": "^22.0.17",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@vaadin/testing-helpers": "^0.3.2"
   },
-  "gitHead": "62419e3f8f41fe9dc4f0bce5e1717b16828459b6"
+  "gitHead": "4ba77c19889036fb954052cf1f32bc96089fcc25"
 }

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>
@@ -108,14 +108,14 @@ class Icon extends ThemableMixin(ElementMixin(PolymerElement)) {
        */
       icon: {
         type: String,
-        observer: '__iconChanged'
+        observer: '__iconChanged',
       },
 
       /**
        * The SVG icon wrapped in a Lit template literal.
        */
       svg: {
-        type: Object
+        type: Object,
       },
 
       /**
@@ -123,11 +123,14 @@ class Icon extends ThemableMixin(ElementMixin(PolymerElement)) {
        */
       size: {
         type: Number,
-        value: 24
+        value: 24,
       },
 
       /** @private */
-      __svgElement: Object
+      __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;
       }
@@ -196,7 +202,7 @@ class Icon extends ThemableMixin(ElementMixin(PolymerElement)) {
       'vaadin:funcion': 'vaadin:function',
       'vaadin:megafone': 'vaadin:megaphone',
       'vaadin:palete': 'vaadin:palette',
-      'vaadin:trendind-down': 'vaadin:trending-down'
+      'vaadin:trendind-down': 'vaadin:trending-down',
     };
     if (icon in deprecatedIcons) {
       console.warn(`WARNING: The icon "${icon}" is deprecated. Use "${deprecatedIcons[icon]}" instead`);
@@ -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

@@ -34,7 +34,7 @@ class Iconset extends ElementMixin(PolymerElement) {
        */
       name: {
         type: String,
-        observer: '__nameChanged'
+        observer: '__nameChanged',
       },
 
       /**
@@ -45,8 +45,8 @@ class Iconset extends ElementMixin(PolymerElement) {
        */
       size: {
         type: Number,
-        value: 24
-      }
+        value: 24,
+      },
     };
   }
 
@@ -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,
+    };
   }
 
   /**

package/theme/lumo/vaadin-icon-styles.js

@@ -9,5 +9,5 @@ registerStyles(
       height: var(--lumo-icon-size-m);
     }
   `,
-  { moduleId: 'lumo-icon' }
+  { moduleId: 'lumo-icon' },
 );

package/theme/material/vaadin-icon-styles.js

@@ -8,5 +8,5 @@ registerStyles(
       height: 24px;
     }
   `,
-  { moduleId: 'material-icon' }
+  { moduleId: 'material-icon' },
 );