Font-Awesome
Font-Awesome copied to clipboard
FortAwesome
Icon size differences when upgrading fortawesome/fontawesome-svg-core to 1.3.0
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
- [x] SVG with JS
- [ ] Web Fonts with CSS
- [ ] SVG Sprites
- [ ] On the Desktop
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
Could you please lock
@fortawesome/fontawesome-svg-coreto~1.2.36and check?
Locking @fortawesome/fontawesome-svg-core to patch only did the trick.
Thanks.
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?
I also have this issue. I did not further investigate as to why this issue occurs but with @fortawesome/[email protected] 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.
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.
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
Experiencing the same issue on my website on the "dependabot" branch: https://github.com/pedrolamas/pedrolamas.com/pull/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.
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.
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
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 https://github.com/FortAwesome/Font-Awesome/pull/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 I was wrong and the resizing is actually working fine for me. Sorry for cluttering this issue. I have opened https://github.com/FortAwesome/Font-Awesome/issues/18788 for the TypeScript error.
It seems latest 6.1.0 version is still having issues:
CI build: https://github.com/pedrolamas/pedrolamas.com/pull/3263
Demo: https://171a61f9.pedrolamas-com.pages.dev/
We weren't able to address this for 6.1.0. But this is on the board and we'll investigate when we can.
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?
It seems latest 6.1.0 version is still having issues:
CI build: pedrolamas/pedrolamas.com#3263
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:
https://github.com/pedrolamas/pedrolamas.com/commit/344f7e65339f4a33d69f7d1429251e51c0217ca8#diff-918eae342714b1d57ffcd0fba2da67b8dd051f811bdc97027a033d1e6459289cR15
Running here:
https://www.pedrolamas.com
@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)
