How to import only some icons with fontawesome JS API?

Question

I fully read the docs.

I installed NPM dependencies and then in my index.js:

import { library, icon } from '@fortawesome/fontawesome-svg-core'
import { faPlus } from '@fortawesome/free-solid-svg-icons'

library.add(faPlus)

And in my HTML

<i class="fa-solid fa-plus"></i>

But the icon is not rendered.

What am I missing? I am using webpack 5.

Answer 1

I was missing dom.watch()

without dom.watch(), automatic replacement of your Font Awesome icons won’t work in the rendered page!

import { dom, library, icon } from '@fortawesome/fontawesome-svg-core'
import { faPlus } from '@fortawesome/free-solid-svg-icons'

library.add(faPlus)
dom.watch()

They don't mention in the docs. Now it's working and the bundle size is much lower.

Answer 2

You need to import dom before use dom.watch()

import { dom } from '@fortawesome/fontawesome-svg-core'