fa-custom-icon-demo
fa-custom-icon-demo copied to clipboard
Demo of using a custom SVG icon within the Font Awesome 5 SVG with JS framework
Font Awesome Custom Icon Demo
This demo using Node.js and Rollup for a build pipeline to create a bundle that is loading in the browser.
If you are using Font Awesome by loading one of our pre-built CDN bundles via <script>
, like this...
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
...then here's a CodePen demo that you might find more helpful.
To See This Demo
-
yarn install
-
./node_modules/.bin/rollup -c
to buildbundle.js
fromindex.js
- load
index.html
in a web browser, and voila
To Make Your Own, Follow the Pattern
- Use your favorite tool to create your icon as an SVG.
- Copy the svg path data from the
d=
attribute of the<path>
element inside the resulting svg file. - Create and export a plain JavaScript object in your own custom icon pack file similar to the
faSplat
sample incustom-icon-pack.js
. - Paste the svg path data into the same place in that JavaScript object as you see the svg path data in the
faSplat
sample. - Set the remaining properties of that JavaScript object as follows:
export const faSomeObjectName = {
// Use a prefix like 'fac' that doesn't conflict with a prefix in the standard Font Awesome styles
// (So avoid fab, fal, fas, far, fa)
prefix: string,
iconName: string, // Any name you like
icon: [
number, // width
number, // height
string[], // ligatures
string, // unicode (if relevant)
string // svg path data
]
}