@indico-data/design-system 3.8.0 → 3.9.0

package/lib/components/icons/Icon.d.ts

@@ -1,2 +1,2 @@
 import { IconProps } from './types';
-export declare const Icon: ({ name, size, className, ariaLabel, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Icon: ({ name, size, className, ariaLabel, faPrefix, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element | null;

package/lib/components/icons/types.d.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';
 export type IndiconName = keyof typeof indicons;
@@ -16,4 +16,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;
 };

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import { IconDefinition, IconName as IconName$1 } from '@fortawesome/fontawesome-svg-core';
+import { IconDefinition, IconPrefix, IconName as IconName$1 } from '@fortawesome/fontawesome-svg-core';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 export * from '@floating-ui/react-dom';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -191,6 +191,10 @@ 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;
 };
 
 type SelectOption = {
@@ -327,7 +331,7 @@ interface ButtonProps {
 
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
-declare const Icon: ({ name, size, className, ariaLabel, ...props }: IconProps) => react_jsx_runtime.JSX.Element | null;
+declare const Icon: ({ name, size, className, ariaLabel, faPrefix, ...props }: IconProps) => react_jsx_runtime.JSX.Element | null;
 
 declare const Table: <T>(props: TableProps<T>) => react_jsx_runtime.JSX.Element;
 

package/lib/index.esm.js

@@ -5016,7 +5016,7 @@ var classnamesExports = classnames.exports;
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
 const Icon = (_a) => {
-    var { name, size = 'md', className, ariaLabel } = _a, props = __rest(_a, ["name", "size", "className", "ariaLabel"]);
+    var { name, size = 'md', className, ariaLabel, faPrefix = 'fas' } = _a, props = __rest(_a, ["name", "size", "className", "ariaLabel", "faPrefix"]);
     const label = ariaLabel || `${name} Icon`;
     const iconClasses = classNames('icon', {
         [`icon--${size}`]: size,
@@ -5026,7 +5026,7 @@ const Icon = (_a) => {
     // Otherwise, search for an indicon (registered under Font Awesome with a prefix of 'fak')
     const icon = faIconName
         ? findIconDefinition({
-            prefix: 'fas',
+            prefix: faPrefix,
             iconName: faIconName,
         })
         : findIconDefinition({