Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

QIcon font awesome v6 class 'fa-classic' causes QIcon to render incorrectly #17483

Closed
mjwlist opened this issue Sep 4, 2024 · 2 comments · May be fixed by https-quantumblockchainai-atlassian-net/quasarframework-8zkcwk#148
Labels
area/components bug/2-confirmed We have reproduce the problem and confirmed that this is a bug. flavour/quasar-cli-vite kind/bug 🐞 Qv2 🔝 Quasar v2 issues

Comments

@mjwlist
Copy link
Contributor

mjwlist commented Sep 4, 2024

What happened?

The valid Font Awesome v6 class 'fa-classic' causes the QIcon component to render incorrectly.
For example:
<q-icon name="fa-classic fa-regular fa-calendar-days" size="5rem" />
Will render:
<i class="q-icon notranslate material-icons" aria-hidden="true" role="presentation" style="font-size: 5rem;">fa-classic fa-regular fa-calendar-days</i>

Without the 'fa-classic' class it will render correctly.
For example:
<q-icon name="fa-regular fa-calendar-days" size="5rem" />
Will render:
<i class="q-icon fa-regular fa-calendar-days" aria-hidden="true" role="presentation" style="font-size: 5rem;"> </i>

What did you expect to happen?

When the 'fa-classic' class is included the icon should render correctly.

For example:
<q-icon name="fa-classic fa-regular fa-calendar-days" size="5rem" />
Should render:
<i class="q-icon fa-classic fa-regular fa-calendar-days" aria-hidden="true" role="presentation" style="font-size: 5rem;"> </i>

It looks as though this is down to some Font Awesome class validation regex in the QIcon component.
Adding 'classic' to this as follows would appear to fix this issue.

For example:
const faRE = /^(fa-(classic|sharp|solid|regular|light|brands|duotone|thin)|[lf]a[srlbdk]?) /

Reproduction URL

https://jsfiddle.net/54jtxhac/

How to reproduce?

  1. Go to the provided reproduction link.2
  2. Look in the inspector to see the rendered output of the two QIcon components. One with and one without the the 'fa-classic' class included.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome, Safari

Quasar info output

No response

Relevant log output

No response

Additional context

Happy to submit a pull request for this but want to check if it would be welcomed first.

We have some api's returning the 'fa-classic' class along with the other parts of the icon classes and this is causing us a number of client side headaches so keen to resolve if possible.

Additional screenshots for context..

Screenshot 2024-09-04 at 16 16 19
Screenshot 2024-09-04 at 16 14 50
Screenshot 2024-09-04 at 16 15 10

@mjwlist mjwlist added kind/bug 🐞 Qv2 🔝 Quasar v2 issues labels Sep 4, 2024
@github-actions github-actions bot added area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite labels Sep 4, 2024
@yusufkandemir yusufkandemir added bug/2-confirmed We have reproduce the problem and confirmed that this is a bug. and removed bug/1-repro-available A reproduction is available and needs to be confirmed. labels Sep 4, 2024
@yusufkandemir
Copy link
Member

Hi, you can omit fa-classic and just use fa-regular fa-calendar-days. But, since you can't easily omit fa-classic and it's a valid value regardless, you can submit a PR. Thanks for explaining the situation in detail.

@mjwlist
Copy link
Contributor Author

mjwlist commented Sep 5, 2024

Ok thanks.
PR submitted: #17486

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/components bug/2-confirmed We have reproduce the problem and confirmed that this is a bug. flavour/quasar-cli-vite kind/bug 🐞 Qv2 🔝 Quasar v2 issues
Projects
None yet
2 participants