How does explicit import work with tree shacking?

Per your doc:

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(fab, faCheckSquare, faCoffee)

fab contains all the font-awesome brand icons. Does that mean they’ll be loaded by the browser even if they’re not actually used?

I’m working with Next.js and I’m currently naming all icons one by one and it’s cumbersome, and I wish to import all icons and kinda hope tree shacking will remove those that aren’t actually used.

[robmadole]

Tree-shaking isn’t quite this smart. It doesn’t know if you are dynamically using an icon.

Right now we don’t have anything better than just importing the icons individually. It’s a pain, but that’s the cost of keeping the bundle size small at the moment. We’ve got plans for helping with this in the future.

[jimjeffers]

@fullhdpixel I just set the "module" attribute in my tsconfig.json to compile my sibling packages as ES6 instead of commonJS. It’s been a few years so your mileage may vary with modern projects and FA6. But in my case I was compiling the packages in my monorepo as commonJS so that my jest tests wouldn’t complain about transpiling dependencies. Webpack can’t perform tree shaking on anything compiled in CommonJS.