QIcon font awesome v6 class 'fa-classic' causes QIcon to render incorrectly #17483
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
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?
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..
The text was updated successfully, but these errors were encountered: