When using dom.watch() icon, sizing and fa-fw does not apply

[rostamiani]

When using dom.watch() icon, sizing and fa-fw does not apply.

This is my main.js:

import { dom } from "@fortawesome/fontawesome-svg-core";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faCompress, faCompressAlt, faExpandAlt, faArrowsAlt, faPencilAlt } from "@fortawesome/free-solid-svg-icons";

// Load fontawesome icons
library.add(faPencilAlt, faCompress, faArrowsAlt, faCompressAlt, faExpandAlt);
dom.watch();

And this is my template:

<i class="fas fa-compress fa-lg fa-fw"></i>

And the output is still small

[robmadole]

@rostamiani using dom.watch() is not the recommended way of using Font Awesome with a Vue project. Can you tell me a little bit about why you are doing this?

[rostamiani]

@robmadole Because I have a VS Code extension that inserts 'i' tags automatically and I don't have to memorize all class names. This really helps.
But in the normal method I couldn't find any extension to do this for me.

Is there any performance problem using dom.watch()?

[robmadole]

@rostamiani yes, dom.watch() is not compatible with Vue. It mutates the DOM at the same time Vue is trying to control it. Causes lots of nasty problems and it's why we created this component.

If you'd like to stick with <i> tags I would suggest you remove vue-fontawesome and switch to a web fonts version of Font Awesome. You can install @fortawesome/fontawesome-free or @fortawesome/fontawesome-pro (if you are a subscriber) and inside those packages are css/*.css files that point to webfont/*.* files. You should be able to import the css files and if you have modern tooling (Webpack) it should know what to do with those.

If using an import gives you problems you can go to a simpler integration using fontawesome.com/kits or host the files from your static assets directory by downloading them from fontawesome.com/download.

[pholly]

@robmadole I'm new to vue-fontawesome. I'm confused because Readme states we need to use dom.watch. Maybe that was copied from npm instructions by accident?

The font awesome vue components should take care of rendering svg right? So we shouldn't use dom.watch?