@vaadin/vaadin-icon - npm Package Compare versions

Comparing version 21.0.0-alpha6 to 21.0.0-alpha7

package.json

 {
   "name": "@vaadin/vaadin-icon",
-  "version": "21.0.0-alpha6",
+  "version": "21.0.0-alpha7",
   "description": "Web component for creating SVG icons",
@@ -28,5 +28,5 @@ "main": "vaadin-icon.js",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-element-mixin": "^21.0.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "^21.0.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "^21.0.0-alpha6",
+    "@vaadin/vaadin-element-mixin": "^21.0.0-alpha7",
+    "@vaadin/vaadin-lumo-styles": "^21.0.0-alpha7",
+    "@vaadin/vaadin-themable-mixin": "^21.0.0-alpha7",
     "lit": "^2.0.0-rc.1"
@@ -40,3 +40,3 @@ },
   },
-  "gitHead": "70e820ca6ad22d0a85a4b50bfad65276ed36f344"
+  "gitHead": "88400bb305d8d705df2c68d49b6d87c109b42d82"
 }

src/vaadin-icon.js

@@ -69,2 +69,3 @@ /**
           height: 24px;
+          fill: currentColor;
         }
@@ -97,3 +98,3 @@
   static get version() {
-    return '21.0.0-alpha6';
+    return '21.0.0-alpha7';
   }
@@ -142,2 +143,7 @@
 
+  constructor() {
+    super();
+    this.__onIconsetRegistered = this.__onIconsetRegistered.bind(this);
+  }
+
   /** @protected */
@@ -150,6 +156,33 @@ ready() {
   /** @private */
+  __getIconsetName(icon) {
+    if (!icon) {
+      return;
+    }
+
+    const parts = icon.split(':');
+    return parts[0] || DEFAULT_ICONSET;
+  }
+
+  /** @private */
+  __onIconsetRegistered(e) {
+    if (e.detail === this.__getIconsetName(this.icon)) {
+      this.__iconChanged(this.icon);
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener('vaadin-iconset-registered', this.__onIconsetRegistered);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('vaadin-iconset-registered', this.__onIconsetRegistered);
+  }
+
+  /** @private */
   __iconChanged(icon) {
     if (icon) {
-      const parts = icon.split(':');
-      const iconsetName = parts[0] || DEFAULT_ICONSET;
+      this.__checkDeprecatedIcon(icon);
+      const iconsetName = this.__getIconsetName(icon);
       const iconset = IconsetElement.getIconset(iconsetName);
@@ -167,2 +200,16 @@ const { svg, size } = iconset.applyIcon(icon);
   /** @private */
+  __checkDeprecatedIcon(icon) {
+    const deprecatedIcons = {
+      'vaadin:buss': 'vaadin:bus',
+      'vaadin:funcion': 'vaadin:function',
+      'vaadin:megafone': 'vaadin:megaphone',
+      'vaadin:palete': 'vaadin:palette',
+      'vaadin:trendind-down': 'vaadin:trending-down'
+    };
+    if (icon in deprecatedIcons) {
+      console.warn(`WARNING: The icon "${icon}" is deprecated. Use "${deprecatedIcons[icon]}" instead`);
+    }
+  }
+
+  /** @private */
   __svgChanged(svg, svgElement) {
@@ -169,0 +216,0 @@ if (!svgElement) {

src/vaadin-iconset.js

@@ -30,3 +30,3 @@ /**
   static get version() {
-    return '21.0.0-alpha6';
+    return '21.0.0-alpha7';
   }
@@ -119,2 +119,3 @@
       iconRegistry[name] = this;
+      document.dispatchEvent(new CustomEvent('vaadin-iconset-registered', { detail: name }));
     }
@@ -121,0 +122,0 @@ }

theme/material/vaadin-icon-styles.js

@@ -7,4 +7,4 @@ import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
     :host {
-      width: 18px;
-      height: 18px;
+      width: 24px;
+      height: 24px;
     }
@@ -11,0 +11,0 @@ `,

No alert changes

Improved metrics

Total package byte prevSize

18230

increased by7.74%

Lines of code

536

increased by8.28%

Dependency changes

• Updated@vaadin/vaadin-element-mixin@^21.0.0-alpha7

• Updated@vaadin/vaadin-lumo-styles@^21.0.0-alpha7

• Updated@vaadin/vaadin-themable-mixin@^21.0.0-alpha7