In one of my recent projects I used Font Awesome as icon set but I needed to add a new icon not included in the standard Font Awesome's library, the DuckDuckGo logo 🦆
After some research I discovered that Font Awesome allows you to add custom icons in addition to what's offered and in this tutorial I'll show you how to extend Font Awesome in 3 simple steps keeping your code clean.
1) First of all create a folder called myicons
and add your icon definition inside a js file (fa-duckduckgo.js
in my case)
export const faDuckDuckGo = {
prefix: "fab",
iconName: "duckduckgo",
icon: [
24,
24,
[],
"e001",
"M12 0C5.373 0 0 ... .616.484z"
]
};
prefix
and iconName
are respectively the icon group (fab -> Font Awesome brands
in this case) and the icon name, so that you can render the icon in this way
<i class="fab fa-duckduckgo"></i>
the icon
section contains the SVG viewbox (24, 24
in this case), the unicode point which represents this custom icon (e001
) and the single-path SVG.
2) Create an index file myicons/index.js
to export your custom icons
export { faDuckDuckGo } from "./fa-duckduckgo";
3) Install fontawesome-svg-core
package
yarn add @fortawesome/fontawesome-svg-core
to make your custom icons available in Font Awesome.
import { library, dom } from "@fortawesome/fontawesome-svg-core";
import { faDuckDuckGo } from "./myicons";
library.add(faDuckDuckGo);
dom.watch();
In the code above your custom icons gets imported from the myicons
module you created before and then added to Font Awesome's library. dom.watch method watches the DOM for any additional icons being added or modified.
Here you can play with the final demo!
Pssst... if you use TypeScript you need to use some types from fontawesome-svg-core
as you can see in this example.