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

您需要在use dom.watch()之前导入dom

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

Answer 2

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.