Icon size differences when upgrading fortawesome/fontawesome-svg-core to 1.3.0

[schajee]

I'm using FA Pro icons my project using SVG and JS via vue-fontawesome in Vuetify. Package has everything locked to ^5.15.3.

Since the launch of 6.0.0 the test build (right) deployed using Docker started using the new version and now my icons are larger/smaller than before. My local development version (left) is fine.

Version: 5.13.3
Browser and version: Chrome 97

• SVG with JS
• Web Fonts with CSS
• SVG Sprites
• On the Desktop

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

Package has everything locked to ^5.15.3.

This should prevent an upgrade to 6.0.0...

Since the launch of 6.0.0 the test build (right) deployed using Docker started using the new version and now my icons are larger/smaller than before. My local development version (left) is fine.

...and it looks like it does, because fa-chart-network and fa-cube look different in FA6

It may be an issue with @fortawesome/fontawesome-svg-core or @fortawesome/fontawesome-common-types

Could you please lock @fortawesome/fontawesome-svg-core to ~1.2.36 and check?

If it does not work, please also lock @fortawesome/fontawesome-common-types to ~0.2.36

Let me know

[schajee]

Could you please lock @fortawesome/fontawesome-svg-core to ~1.2.36 and check?

Locking @fortawesome/fontawesome-svg-core to patch only did the trick.

Thanks.

[tagliala]

Welcome, but I will reopen this because this behavior looks like a bug.

Is there by any chance to provide a reduced test case in which the database icon looks so big?

[buffalom]

I also have this issue. I did not further investigate as to why this issue occurs but with @fortawesome/fontawesome-svg-core@1.2.36 it did not occur and when I ran yarn upgrade @fortawesome/fontawesome-svg-core to 1.3.0 the icons started appearing way too large.

[jakedolan]

It appears that the class .fa-w-16 which was attached by default previously to the svgs no longer exists as of 1.3.0. It provided a width style for the .svg-inline--fa class which would explain the difference in icon sizes people are experiencing. The other similar classes .fa-w-X that determined the svg widths appear to have been removed as well.

I assume this is related to the release of fontawesome 6.0, but this feels that it should have been included in a major version rather than a minor version bump given it potentially breaks layouts.

[tagliala]

I assume this is related to the release of fontawesome 6.0, but this feels that it should have been included in a major version rather than a minor version bump given it potentially breaks layouts.

Agree

Don't know if this is an issue or the behavior is different in FA6, let's ask @robmadole for some feedback

[pedrolamas]

Experiencing the same issue on my website on the "dependabot" branch: pedrolamas/pedrolamas.com#3141

That PR has an automatic build showing the problem, just click on the link to see it.

Mind you, no other Font Awesome package was updated, just the fortawesome/fontawesome-svg-core one.

[robmadole]

Thanks @pedrolamas I'll take a look at that preview.

[paulfalgout]

This issue is baffling me. If I update to 1.3.0 I get the big icon issue, but what is happening is that webpack is not includingimport '@fortawesome/fontawesome-svg-core/styles.css'; at all. None of those styles make it in the build. However if I lock it to 1.2.36 and then manually go into node_modules and update the styles.css file to the new styles, webpack will build this same import without issue.

[tagliala]

but what is happening is that webpack is not includingimport '@fortawesome/fontawesome-svg-core/styles.css';

I think this issue may be related to #18773 instead

[daven97]

I am having this issue as well.

Please let me know if this should be in a separate issue, but I am also getting a TypeScript error saying that the xl size is invalid.

The docs at https://fontawesome.com/docs/web/style/size has this list of size options:

and the fontawesome-react docs at https://fontawesome.com/docs/web/use-with/react/style#size state:

Font Awesome supports t-shirt size scale from 2xs to 2xl as well as literal sizing from 1x to 10x.

However, looking at @robmadole's changes to SizeProp in https://github.com/FortAwesome/Font-Awesome/blob/65f4bdb5025759ba25cd3432568de288b6a67527/js-packages/%40fortawesome/fontawesome-svg-core/index.d.ts as part of #18652, several of the sizes from the table above are missing, including xl.

In addition to the TypeScript error, the icon doesn't display at a larger size, as if the xl option is not longer supported.

[tagliala]

Please let me know if this should be in a separate issue,

yes please

[daven97]

@tagliala I was wrong and the resizing is actually working fine for me. Sorry for cluttering this issue. I have opened #18788 for the TypeScript error.

[pedrolamas]

It seems latest 6.1.0 version is still having issues:

CI build: pedrolamas/pedrolamas.com#3263

Demo: https://171a61f9.pedrolamas-com.pages.dev/

[robmadole]

We weren't able to address this for 6.1.0. But this is on the board and we'll investigate when we can.

[pedrolamas]

I just noticed that though this issue is marked as being 5.x, it is actually happening on 6.x too!

Can someone update this or should a new issue be open?

[pedrolamas]

It seems latest 6.1.0 version is still having issues:

CI build: pedrolamas/pedrolamas.com#3263

Demo: 171a61f9.pedrolamas-com.pages.dev

I've now managed to fix this in my site, apparently now a viewBox is necessary on the svg element, once I added that in, everything worked fine with the latest versions!

Changes here:

pedrolamas/pedrolamas.com@344f7e6#diff-918eae342714b1d57ffcd0fba2da67b8dd051f811bdc97027a033d1e6459289cR15

Running here:

https://www.pedrolamas.com

[WikiRik]

@robmadole is this issue being tracked anywhere else as well or hasn't there been any updates since last year? I assume this line of the 6.0.0-alpha2 changelog is causing this; Corrected box-sizing and the box-model for SVG + JS framework-rendered icons
Is there a recommended way to migrate to v6 with the old sizing?

Also; this has the '5.x' label but it is a breaking change between 1.2.36 and 1.3.0 (which is now getting updates as 6.x.x)