I'm trying to create a subset of only the Font Awesome icons we are using on one of our websites using this method and have it working.
While the size of the bundle is reduced, the Font Awesome script seems to be slowing down the site. I think it is due to the dom.watch() function observing the page for changes. There are no changes going to occur and a lot DOM nodes, so really, I just want the icons to be set up after the page load.
https://fontawesome.com/how-to-use/with-the-api/methods/dom-watch
https://fontawesome.com/how-to-use/with-the-api/methods/dom-i2svg
From the docs I assume I could call dom.i2svg() but this results in an error in the browser: "dom.i2svg() is undefined".
When I use dom.watch() the icons are showing and when I console.log(dom), it shows the i2svg() and watch() functions are in the object, so I don't understand why i2svg() is undefined.
I'm using rollup.js to create the bundle and have also used parcel-bundler with the same result.
Here is my main.js file that I am bundling.
import { dom, library, config } from '@fortawesome/fontawesome-svg-core'
import {
faCamera,
faStar,
faStarHalf,
faSearch,
faExternalLinkAlt,
faAngleRight,
faAngleDown,
faPlay,
faPhone,
faExternalLinkSquareAlt,
faAngleUp,
faCommentAlt
} from '@fortawesome/free-solid-svg-icons'
import {
faTwitter,
faYoutube,
faInstagram,
faLinkedinIn,
faFacebookF
} from '@fortawesome/free-brands-svg-icons'
import { faChevronCircleDown as falChevronCircleDown,
faEnvelopeOpenText as falEnvelopeOpenText,
faMapMarkerAlt as falMapMarkerAlt,
faPhone as falPhone,
faCommentAltLines as falCommentAltLines,
faExternalLink as falExternalLink,
faExternalLinkAlt as falExternalLinkAlt,
faExternalLinkSquare as falExternalLinkSquare,
faExternalLinkSquareAlt as falExternalLinkSquareAlt,
faHomeAlt as falHomeAlt,
faCalendarCheck as falCalendarCheck,
faFileDownload as falFileDownload,
faFolderOpen as falFolderOpen
} from '@fortawesome/pro-light-svg-icons'
import { faCommentAltLines as farCommentAltLines } from '@fortawesome/pro-regular-svg-icons';
library.add(faPhone,
faCamera,
faStar,
faStarHalf,
faSearch,
faAngleRight,
faAngleDown,
faPlay,
faExternalLinkAlt,
faExternalLinkSquareAlt,
faAngleUp,
faTwitter,
faYoutube,
faInstagram,
faFacebookF,
faLinkedinIn,
falChevronCircleDown,
falEnvelopeOpenText,
falMapMarkerAlt,
falPhone,
falExternalLinkSquareAlt,
falExternalLinkSquare,
falExternalLinkAlt,
falExternalLink,
farCommentAltLines,
falCommentAltLines,
falHomeAlt,
falCalendarCheck,
falFileDownload,
falFolderOpen
);
// dom.watch();
dom.i2svg()
If I use dom.watch, the <i class="fas fa-camera"></i> are replaced with SVGs as expected but if I call dom.i2svg, I get a error that the function undefined.
I've been trying to get this fixed for a couple of days and have asked FA for help as well, with no luck. Any help would be greatly appreciated. Basically I'd like to use dom.i2svg() because I'm guessing it will stop the page slowing down. Thanks.