FontAwesome: Typescript issue passing props about primereact HOT 5 OPEN

That is weird because the icon is inside a <li> which has a key?

            const icon = createRemoveIcon(value, index);
            const tokenProps = mergeProps(
                {
                    key: `${index}_${value}`,
                    id: props.inputId + '_chips_item_' + index,
                    role: 'option',
                    'aria-label': value,
                    className: cx('token', { focusedIndex, index }),
                    'aria-selected': true,
                    'aria-setsize': props.value.length,
                    'aria-posinset': index + 1,
                    'data-p-highlight': true,
                    'data-p-focused': focusedIndex === index
                },
                ptm('token')
            );

            return (
                <li {...tokenProps}>
                    {label}
                    {icon}
                </li>
            );

from primereact.

@jnoren1 can you try my reproducer: https://stackblitz.com/edit/vitejs-vite-tfhpc2?file=src%2FApp.tsx

You missed one step {...options.iconProps} I think https://primereact.org/customicons/#fontawesome

from primereact.

Wow, I've been using this library for about six years, and I never came across that specific piece of documentation. When we noticed the JSX indicators, we wondered if we could incorporate a custom Icon. Through trial and error it turned out we could, and we just went ahead with it without consulting the documentation. Your approach did indeed solve that issue. Miraculously, it also corrected the button callbacks, which had never quite worked as described. That's fantastic, thank you so much.

It opened up another more concerning error though. There is some typescript incompatibility going on with the size property and when forced it gave the following. I've added the callback style now to a lot of code and every single one takes issue with the size....

ProgramChips.tsx?t=1714800159507:20 Warning: Failed prop type: Invalid prop size of value 4 supplied to FontAwesomeIcon, expected one of ["2xs","xs","sm","lg","xl","2xl","1x","2x","3x","4x","5x","6x","7x","8x","9x","10x"].

I hacked it a wrapper function, but that does not seem ideal

    removeIcon={(i) => (
            <FontAwesomeIcon
              {...faExProps(i.iconProps)}
              key={`${program.id}-${index}`}
              icon={faXmarkCircle}
              className="ml-2 text-red-400 hover:text-red-950 cursor-pointer"
              size={"xl"}
            />
          )}

export const faExProps = (props: HTMLProps<unknown> | SVGProps<unknown>): { [key: string]: unknown; } => {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const { size, ...rest } = props as HTMLProps<unknown>;
  return rest;
};

from primereact.

@jnoren1 that is great. Do you have a suggestion how we could update the Typescript to make it flexible right now as you know its...

Right now the Typescript is.

/**
 * Icon options passed to any icon.
 * ComponentProps are props from the owning component.
 * AdditionalProps are any custom properties of an icon like SortIcon of the Datatable for example.
 */
export type IconOptions<ComponentProps, AdditionalProps> = AdditionalProps & {
    /**
     * Icon specific properties.
     */
    iconProps: React.HTMLProps<any> | React.SVGProps<any>;
    /**
     * The element representing the icon.
     */
    element: React.ReactNode;
    /**
     * Properties of the owning component.
     */
    props?: ComponentProps;
    [key: string]: any;
};

from primereact.

@jnoren1 can you check my PR I think I fixed it to FontAwesome size property will be respected. #6579

from primereact.