diff --git a/src/components/Alert/Alert.spec.js b/src/components/Alert/Alert.spec.js
index 7ea2b822c..ed7bf48fd 100644
--- a/src/components/Alert/Alert.spec.js
+++ b/src/components/Alert/Alert.spec.js
@@ -36,7 +36,7 @@ describe('', () => {
it('should show info for info', () => {
const icon = shallow().find(Icon);
- assert.equal(icon.prop('name'), 'fa-info');
+ assert.equal(icon.prop('name'), 'info');
});
it('should show check for success', () => {
diff --git a/src/components/Icon/FontAwesomeAPM.tsx b/src/components/Icon/FontAwesomeAPM.tsx
index 255d37858..9d9d96234 100644
--- a/src/components/Icon/FontAwesomeAPM.tsx
+++ b/src/components/Icon/FontAwesomeAPM.tsx
@@ -32,7 +32,7 @@ export interface FontAwesomeAPMProps extends React.HTMLAttributes {
}
/**
- * A React component for the font-awesome icon library.
+ * A React component for the fontawesome icon library.
*
*
* @param {String} [ariaLabel] An extra accessibility label to put on the icon
@@ -49,6 +49,7 @@ export interface FontAwesomeAPMProps extends React.HTMLAttributes {
* @param {Boolean} [spin=false] Spin the icon
* @param {String} [stack] Stack an icon on top of another
* @param {String} [tag=span] The HTML tag to use as a string (eg 'i' or 'em')
+ * @param {String} [iconStyle] Font Awesome classic family with multiple icon styles to choose from
* @module FontAwesome
* @type {ReactClass}
*/
@@ -101,7 +102,7 @@ export default class FontAwesomeAPM extends React.Component
const fa = classNames.map((iconName) => `fa-${iconName}`);
!iconStyle ? fa.unshift(`fa-solid`) : fa.unshift(`fa-${iconStyle}`);
-
+
classNames = fa;
}
diff --git a/src/components/Icon/Icon.stories.js b/src/components/Icon/Icon.stories.js
index 4344218f5..fe426aac6 100644
--- a/src/components/Icon/Icon.stories.js
+++ b/src/components/Icon/Icon.stories.js
@@ -11,6 +11,7 @@ export default {
component: Icon,
};
+// React component for font awesome v6
export const LiveExample = () => (
', () => {
it('should take a type option', () => {
const icon = shallow().find(Icon);
- assert.strictEqual(icon.prop('name'), 'info');
+ assert.strictEqual(icon.prop('name'), 'circle-info');
assert.strictEqual(icon.prop('className'), 'text-info');
});
diff --git a/yarn.lock b/yarn.lock
index 7ebf71581..554609650 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -57,6 +57,8 @@ __metadata:
"@babel/preset-env": ^7.16.11
"@babel/preset-react": ^7.16.7
"@babel/preset-typescript": ^7.16.7
+ "@fortawesome/fontawesome-free": ^6.2.0
+ "@fortawesome/fontawesome-svg-core": ^6.2.0
"@jest/types": ^27.5.1
"@popperjs/core": ^2.10.1
"@storybook/addon-a11y": ^6.3.11
@@ -138,7 +140,6 @@ __metadata:
raf-stub: ^3.0.0
react: ^16.14.0
react-dom: ^16.14.0
- react-fontawesome: ^1.7.1
react-imask: ^6.2.2
react-resize-detector: ^4.2.3
react-select-plus: 1.2.0
@@ -1924,6 +1925,29 @@ __metadata:
languageName: node
linkType: hard
+"@fortawesome/fontawesome-common-types@npm:6.2.0":
+ version: 6.2.0
+ resolution: "@fortawesome/fontawesome-common-types@npm:6.2.0"
+ checksum: 1d0a3340dc2d2798609195cf77f1b0db98f0d87144044eb7cd3d78745baac8509705c6ebc7cce3d9bb36c7d7358ca064f77f39d86478ab1e7aa7aadc344cfd91
+ languageName: node
+ linkType: hard
+
+"@fortawesome/fontawesome-free@npm:^6.2.0":
+ version: 6.2.0
+ resolution: "@fortawesome/fontawesome-free@npm:6.2.0"
+ checksum: fd3fcc0a963b907110922b5ac0ca67633aea20b5034102a1f5d285830f7f7a27f9c9de0c4a30228ccd2579bd8f95581a1bbef9519c7b74632e7012d60dd57bb7
+ languageName: node
+ linkType: hard
+
+"@fortawesome/fontawesome-svg-core@npm:^6.2.0":
+ version: 6.2.0
+ resolution: "@fortawesome/fontawesome-svg-core@npm:6.2.0"
+ dependencies:
+ "@fortawesome/fontawesome-common-types": 6.2.0
+ checksum: 3bae680cba4098bc3a6aee04e655e0c6b6bab2d78e6709dc0a44d106f57a09bc2fd979310108777a373df301273a2a276739056f8984cd8bc5a50d37338c5380
+ languageName: node
+ linkType: hard
+
"@gar/promisify@npm:^1.0.1, @gar/promisify@npm:^1.1.3":
version: 1.1.3
resolution: "@gar/promisify@npm:1.1.3"
@@ -14693,17 +14717,6 @@ __metadata:
languageName: node
linkType: hard
-"react-fontawesome@npm:^1.7.1":
- version: 1.7.1
- resolution: "react-fontawesome@npm:1.7.1"
- dependencies:
- prop-types: ^15.5.6
- peerDependencies:
- react: ">=0.12.0"
- checksum: 0b4ff66aac939b0fb288c68466b1702f7e2c51238bec0ca0899cea968c7bebe74a6f6a8dfe23d0771986fca83b32a1c7af7b706caee4b739a216ced48bf3f6bb
- languageName: node
- linkType: hard
-
"react-imask@npm:^6.2.2":
version: 6.4.2
resolution: "react-imask@npm:6.4.2"