ember-fontawesome icon indicating copy to clipboard operation
ember-fontawesome copied to clipboard

FontAwesome 6 Support

Open jgadbois opened this issue 3 years ago • 17 comments

Is your feature request related to a problem? Please describe. We are looking to upgrade our app to FA 6 - is the Ember library still going to be the recommended way of integrating FA6 with an Ember app?

Describe the solution you'd like I would like to continue using the ember library but with FA6 icons

Describe alternatives you've considered Are there other ways to manually integrated FA6 into an Ember application without too much rework?

jgadbois avatar Jul 30 '21 13:07 jgadbois

I @jgadbois this is a late reply, sorry about that.

FA 6 is fully backward-compatible with version 5. This component ember-fontawesome is still the recommended way to use Font Awesome with Ember.

robmadole avatar Oct 04 '21 21:10 robmadole

Thanks! Do you have npm packages for version 6 yet, or do I need to manually include the libraries?

jgadbois avatar Oct 05 '21 00:10 jgadbois

I was able to manually include the js file and use that, however not all icons work. I believe this is because aliased icons don't work using the ember library for some reason.

jgadbois avatar Oct 12 '21 19:10 jgadbois

I have the same request. Looks like this hasnt been resolved yet.

cah-brian-gantzler avatar Jan 27 '22 15:01 cah-brian-gantzler

Yeah, I think @jgadbois is correct. We need to add support for aliased icons. Let me look into this with @jrjohnson 's help and we'll see what we can do.

robmadole avatar Feb 22 '22 16:02 robmadole

Some points of interest here.

This function is responsible for normalizing the icon argument into the format that icon() expects from the @fortawesome/fontawesome-svg-core package.

https://github.com/FortAwesome/ember-fontawesome/blob/0bd1329d6be51181a52d33b1ea6c7d773b7d884f/addon/components/fa-icon.js#L13-L31

In the Vue component we updated this to use the new parse.icon() function which will resolve aliases.

So this probably needs to be ported to ember-fontawesome. Are there any other spots (the build time component?) that this might be needed?

robmadole avatar Feb 22 '22 16:02 robmadole

Any updates? Would like to move to V6

cah-brian-gantzler avatar Apr 22 '22 19:04 cah-brian-gantzler

We've been using this addon with v6 in production since the release. Not sure what is needed to make it official, but I think it's probably administrative and not code.

jrjohnson avatar Apr 22 '22 19:04 jrjohnson

The issue has to do with the new version not honoring aliases. If you are not using any aliases, then yes you are probably fine. I am trying to avoid going through all my code looking for aliases and changing them to the proper name.

cah-brian-gantzler avatar Apr 23 '22 12:04 cah-brian-gantzler

Alias issues should be fixed in #206 I believe. Not quite the same as the Vue component since we support a default prefix, but it appears to work. @cah-briangantzler do you have an environment where you could test this?

jrjohnson avatar Apr 25 '22 07:04 jrjohnson

I have tests that check for the existence of the icons on the screen. When upgrading to

    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",

Many test fail attempting to find the icon

Adding the following does not make the test pass

    "@fortawesome/ember-fontawesome": "jrjohnson/ember-fontawesome#420e236",

Does not appear to make my tests pass.

cah-brian-gantzler avatar Apr 25 '22 15:04 cah-brian-gantzler

Are your tests looking for the name of the icon @cah-briangantzler? The way the aliasing parsing works is that you get the alias target. So trash-alt returns trash-can. We're probably going to have to push this as a breaking change because of that.

jrjohnson avatar Apr 25 '22 17:04 jrjohnson

They are suppose to be using data-test-* for just this reason. It does look like there are a few less but yes, they are using this svg.fa-pencil-alt as the selector in many places

Yes going to have to be a breaking change. Its possible they were also using the class so more than just tests could fail, css could be applied incorrectly.

If I end up having to change a lot of these, I will prob just change to the proper name, almost the same effort

cah-brian-gantzler avatar Apr 25 '22 22:04 cah-brian-gantzler

Should I go ahead and merge that PR @cah-briangantzler and get a release going? Not sure if there is anything to be done about this, but wanted to give you some more time to test.

jrjohnson avatar May 02 '22 21:05 jrjohnson

Yea you can merge it as a breaking change. I would make sure you document the fact that the alias is NO longer the css class as it was before.

cah-brian-gantzler avatar May 02 '22 21:05 cah-brian-gantzler

In order for me to upgrade I will have to go through my code and change the css/tests to use the real name. Which means I will go through and also no longer use the alias just be complete

cah-brian-gantzler avatar May 02 '22 21:05 cah-brian-gantzler

Is there anything that can be done to move this PR along? I'd be happy to test.

cloke avatar Jul 01 '22 22:07 cloke