WARNING: 0.3.3 contains updates to font-awesome 5.x to 6.x not listed in the 0.3.3 notes

[cah-brian-gantzler]

WARNING. Updating from 0.3.2 to 0.3.3 has you upgrading to font-awesome 6.0 which has a lot of breaking changes. The change notes for 0.3.3 should include the update in this PR 1b8c17a

Upgrading from 0.3.2 to 0.3.3 to icons generated are missing some classes. CSS in the core has been changed.

Previous element generated for a pencil icon

<svg class="svg-inline--fa fa-pencil-alt fa-w-16" data-prefix="fas" data-icon="pencil-alt" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <path fill="currentColor" d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"></path>
    </svg>

Icon now generated

<svg class="svg-inline--fa fa-pencil-alt" data-prefix="fas" data-icon="pencil-alt" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <path fill="currentColor" d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"></path>
    </svg>

You will notice the fa-w-16 is missing.
CSS Targeting this class was provided by font-awesome(appears to come from an update to font-awesome core) (excerpt below)

.svg-inline--fa.fa-w-13 {
    width: .8125em
}

.svg-inline--fa.fa-w-14 {
    width: .875em
}

.svg-inline--fa.fa-w-15 {
    width: .9375em
}

.svg-inline--fa.fa-w-16 {
    width: 1em
}

.svg-inline--fa.fa-w-17 {
    width: 1.0625em
}

.svg-inline--fa.fa-w-18 {
    width: 1.125em
}

All the CSS referring to fa-w-xx has been removed. This greatly effected my application. Assume it will for others.

[jrjohnson]

Sorry @cah-briangantzler I didn't know the updates were this breaking. I don't really have a solution to this other than locking the version in your app. I was holding off shipping the possibly breaking change in #206, but I think we should just move forward with both now.

[cah-brian-gantzler]

The removal of the spaces in 569f3e6 also moved my icons, because they were positioned on the screen with the spaces, now they are moved left. Not so big of a change but would have had to go through the app and add the spaces back. I only noticed that in a couple places, but definitely a breaking change. At least that was listed in the update notes.

I ended up putting the following in order to get the visuals back.

  "resolutions": {
    "@fortawesome/fontawesome-svg-core": "1.2.35"
  }

In order to upgrade I think I will have to go through the entire app looking at every icon and applying my own CSS to get the visuals back in line. In most cases its the above CSS missing so the icons are much larger because the width: 1em is not being applied

.svg-inline--fa.fa-w-16 {
    width: 1em
}

looked like width: 1.9em is whats being applied now.

Unless people overrode the default CSS with their own, I would think anyone upgrading would have to go through this.

As it turns out I already had a project to go through and fixed every icon to no longer use the alias. At first the aliases were not honored, then it was fixed, but also not giving the class of the alias as it used to, so more CSS changes.

Perhaps the lesson here is, if at all possible, never use the CSS from an addon but write your own 😦

I would update the version notes to let people know that the underlying fontawesome is updated to V6. I would have taken a closer look when I updated had it been there.

Thanks

[jrjohnson]

I've updated the notes at https://github.com/FortAwesome/ember-fontawesome/releases/tag/0.3.3 with this info.