diff --git a/package-lock.json b/package-lock.json index 00078ac..74c7ce1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2315,6 +2315,27 @@ } } }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.32", + "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/0.2.32/fontawesome-common-types-0.2.32.tgz", + "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.32", + "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-svg-core/-/1.2.32/fontawesome-svg-core-1.2.32.tgz", + "integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.32" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.15.1", + "resolved": "https://npm.fontawesome.com/@fortawesome/free-solid-svg-icons/-/5.15.1/free-solid-svg-icons-5.15.1.tgz", + "integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.32" + } + }, "@nicolo-ribaudo/chokidar-2": { "version": "2.1.8", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8.tgz", diff --git a/package.json b/package.json index 9ae1410..c97ffc1 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,8 @@ }, "dependencies": { "@babel/polyfill": "7.12.1", + "@fortawesome/fontawesome-svg-core": "1.2.32", + "@fortawesome/free-solid-svg-icons": "5.15.1", "foundation-sites": "6.6.3", "jquery": "3.5.1", "motion-ui": "2.0.3", diff --git a/src/assets/js/app.js b/src/assets/js/app.js index d4dc4b7..02a37af 100644 --- a/src/assets/js/app.js +++ b/src/assets/js/app.js @@ -13,5 +13,9 @@ if ( import './lib/foundation'; import './helper/exit-intent-reveal'; +// import FA last, to kick off the process of finding tags and +// replacing with tags, after importing all components. +import './lib/FontAwesome'; + // because jQuery is included with webpack.ProvidePlugin we can // just use jQuery and $ variables without importing it again. diff --git a/src/assets/js/lib/FontAwesome.js b/src/assets/js/lib/FontAwesome.js new file mode 100644 index 0000000..29362de --- /dev/null +++ b/src/assets/js/lib/FontAwesome.js @@ -0,0 +1,52 @@ +/** + * Integrate FontAwesome Icons + * + * Available Packages: + * @fortawesome/free-solid-svg-icons + * @fortawesome/free-regular-svg-icons + * @fortawesome/free-brands-svg-icons + * @fortawesome/pro-solid-svg-icons + * @fortawesome/pro-regular-svg-icons + * @fortawesome/pro-light-svg-icons + * @fortawesome/pro-duotone-svg-icons + * + * You need to install needed packages first: + * npm i -E @fortawesome/free-regular-svg-icons + * + * Access to the Pro packages requires you to configure the @fortawesome scope + * to use teir Pro NPM registry. + * @see https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers#installing-pro + */ + +import { library, dom } from '@fortawesome/fontawesome-svg-core'; + +/* SOLID */ +import { faArrowCircleRight } from '@fortawesome/free-solid-svg-icons/faArrowCircleRight'; + +/* REGULAR */ + +/* LIGHT */ + +/* DUOTONE */ + +/* BRANDS */ + +/* register used fontawesome icons */ +library.add( + /* SOLID */ + faArrowCircleRight, + + /* REGULAR */ + + /* LIGHT */ + + /* DUOTONE */ + + /* BRANDS */ +); + +// Kicks off the process of finding tags and replacing with +dom.i2svg(); + +// use dom.watch if you plan to dynamically add icon tag. +// dom.watch();