Vaadin migration 14 to 23: icons have different size (viewbox wrong?)-CodePudding

After migrating from Vaadin 14 to Vaadin 23 in my application the icons are sized differently. Vaadin seems to always use viewBox="0 0 24 24" but my icons have different viewBox values.

Here is what it looks like with one icon too large and another too small:

In the icons.js there is the definition of the upper icon with this viewBox: <vaadin-iconset name="video"><svg><defs><g id="video" viewBox="0 0 55.125 55.125"><path d="[...]"/></g></defs></svg></vaadin-iconset>' and the definition of the lower icon with this viewBox: '<vaadin-iconset name="cog-o"><svg><defs><g id="cog-o" viewBox="0 0 16 16"><path d="[...]"/></g></defs></svg></vaadin-iconset>'

And in the resulting (Vaadin 23) application viewBox values are different (and I don't know where the difference comes from): <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" aria-hidden="true" viewBox="0 0 24 24"><path d="[...]"></path></svg>

In Vaadin 14 the viewBox values at the svg element were exactly as defined in the icons.js.

One possible fix is to scale all my icons outside of the application (or maybe even within the application). But this is something the browser can do (and does - when I change the values manually in debug console) as long as the viewBox values are correct.

What can I do to get the intended viewBox values in Vaadin 23 as it was in Vaadin 14?

CodePudding user response：

Add/Set the size attribute at the vaadin-iconset element:

<vaadin-iconset name="video" size="55.125">
<svg><defs>
<g id="video" viewBox="0 0 55.125 55.125"><path d="[...]"/></g>
</defs></svg>
</vaadin-iconset>

The value of size equals to the max of viewBox[2] and viewBox[3].