question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug Report] Vuetify doesn't work properly with FontAwesome SVGs

See original GitHub issue

Environment

Vuetify Version: 2.3.20 Vue Version: 2.6.12 Browsers: Firefox 83.0 OS: Mac OS 10.15

Steps to reproduce

  1. Create and include a FontAwesome SVG kit
  2. Add an icon, e.g. <v-icon>fas fa-trash</v-icon>
  3. Flip to dark mode

Expected Behavior

Icon should be white (as when using FontAwesome webfont mode)

Actual Behavior

Icon remains the same color (the theme class is not updated on the svg)

Reproduction Link

https://codepen.io/ffxsam/pen/jOMMEpO

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
KaelWDcommented, Dec 9, 2020

In v2.4 you can use the new global icons.component property to integrate something like iconify: #7821

Read more comments on GitHub >

github_iconTop Results From Across the Web

Font-awesome SVG icons not working with Vuetify
The main problem is that it should change the prebuilt component's icons as far as I understand it otherwise you would need to...
Read more >
Icon Fonts — Vuetify
Font Awesome SVG Icons​​ Add required dependencies. Then add globally font-awesome-icon component and set faSvg as iconfont in Vuetify config.
Read more >
Font Awesome icons in Vue.js apps: A complete guide
The Font Awesome icon collection is a library of free, easy-to-use icons. In this tutorial, learn to add those icons to your Vue.js...
Read more >
How to properly use FontAwesome in a Vue project in 2020?
Yes. It's a heavy process I admit, but it has benefits for performance. Everything's explained on the library's readme: Why use the concept...
Read more >
Vuetify Custom Icons Documentation is Horrendous : r/vuetifyjs
Not sure if this is the right place at all. I just googled "vuetify documentation is bad" and found this sub so I...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found