The @fortawesome/fontawesome-svg-core package provides the functionality but not any of the icon content.
npminstall @fortawesome/fontawesome-svg-core
We'll be using the library object which is part of the API. Install one of the icon content packages and let's get going.
# Free icons stylesnpminstall @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
# Pro icons stylesnpm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-thin-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons
npm i --save @fortawesome/sharp-solid-svg-icons
Font Awesome Sharp requires Pro and specific versions!
What's going on here? The findIconDefinition() method is using the library to locate an icon that matches the prefix and iconName.
The Library enables all icon lookups
Without the Library any method of the API that needs to locate an icon would be unable to find it. The Library is a required piece of the puzzle and it's a good idea to become familiar with it if you are going to use the API.
The glasses object contains all the information about the icon–size, prefix, name, and the SVG path data. This is known as the icon definition.
One of the most useful API methods to use icon definitions with is icon(). It can transform an icon definition into an SVG representation suitable for use in the DOM or elsewhere.
import{ findIconDefinition, icon }from'@fortawesome/fontawesome-svg-core'const glasses =findIconDefinition({prefix:'fas',iconName:'glasses'})const i =icon(glasses)// Loop through each node and appending it to the DOM body
Array.from(i.node).map(n=> document.body.appendChild(n))
Subsetting
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 26,233 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
While it's easy to add entire styles to the library this results in some big
files. A typical site, even one that uses a lot of icons, will only need a
small portion of the thousands of icons Font Awesome provides.
That's where subsetting comes in.
Let's take our previous example and only import the icons that we need.
You can reap the benefits of this explicit import through bundling tools that
eliminate "dead code". Dead code is anything in your final bundle that will
never be used by your project (making it safe to be removed). This process is
known as tree shaking. Rollup(opens new window) and Webpack 2+(opens new window) are a couple of tools that support tree shaking(opens new window).