@indico-data/design-system 3.7.0 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.7.0",
+  "version": "3.9.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -27,9 +27,9 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.1",
-    "@fortawesome/fontawesome-svg-core": "^6.5.2",
-    "@fortawesome/free-regular-svg-icons": "^6.5.2",
-    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-regular-svg-icons": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@hookform/resolvers": "^3.9.0",
     "@indico-data/utils": "^0.0.5",
@@ -166,9 +166,9 @@
     "yarn": "4.0.2"
   },
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-regular-svg-icons": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/src/components/icons/Icon.stories.tsx

@@ -62,6 +62,13 @@ const meta: Meta = {
         category: 'callbacks',
       },
     },
+    faPrefix: {
+      control: 'text',
+      defaultValue: 'fas',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
   },
 };
 export default meta;

package/src/components/icons/Icon.tsx

@@ -3,7 +3,14 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconName as FAIconName, findIconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { IconProps } from './types';
 
-export const Icon = ({ name, size = 'md', className, ariaLabel, ...props }: IconProps) => {
+export const Icon = ({
+  name,
+  size = 'md',
+  className,
+  ariaLabel,
+  faPrefix = 'fas',
+  ...props
+}: IconProps) => {
   const label = ariaLabel || `${name} Icon`;
 
   const iconClasses = classNames(
@@ -20,7 +27,7 @@ export const Icon = ({ name, size = 'md', className, ariaLabel, ...props }: Icon
   // Otherwise, search for an indicon (registered under Font Awesome with a prefix of 'fak')
   const icon = faIconName
     ? findIconDefinition({
-        prefix: 'fas',
+        prefix: faPrefix,
         iconName: faIconName as FAIconName,
       })
     : findIconDefinition({

package/src/components/icons/types.ts

@@ -1,6 +1,6 @@
 import { MouseEventHandler, CSSProperties } from 'react';
 import { PermafrostComponent } from '../../types';
-import { IconName as FAIconName } from '@fortawesome/fontawesome-svg-core';
+import { IconName as FAIconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
 import { indicons } from './indicons';
 
 export type IconSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
@@ -20,4 +20,8 @@ export type IconProps = PermafrostComponent & {
   style?: CSSProperties;
   /** Click event handler */
   onClick?: MouseEventHandler<SVGElement>;
+  /** The Font Awesome prefix of the icon (defaults to 'fas', the solid icon prefix)
+   * Only used for Font Awesome icons, not for Indicons.
+   */
+  faPrefix?: IconPrefix;
 };