feat(web): font awesome icon animations

2026-08-17 06:56:03 +01:00 · 2023-11-15 15:28:21 +01:00
parent a50f7a2052
commit 882e372895
24 changed files with 124 additions and 47 deletions
--- a/web/src/components/LibIcon.tsx
+++ b/web/src/components/LibIcon.tsx
@@ -0,0 +1,30 @@
+import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+
+export type IconAnimation =
+  | 'spin'
+  | 'spinPulse'
+  | 'spinReverse'
+  | 'pulse'
+  | 'beat'
+  | 'fade'
+  | 'beatFade'
+  | 'bounce'
+  | 'shake';
+
+const LibIcon: React.FC<FontAwesomeIconProps & { animation?: IconAnimation }> = (props) => {
+  const animationProps = {
+    spin: props.animation === 'spin',
+    spinPulse: props.animation === 'spinPulse',
+    spinReverse: props.animation === 'spinReverse',
+    pulse: props.animation === 'pulse',
+    beat: props.animation === 'beat',
+    fade: props.animation === 'fade',
+    beatFade: props.animation === 'beatFade',
+    bounce: props.animation === 'bounce',
+    shake: props.animation === 'shake',
+  };
+
+  return <FontAwesomeIcon {...props} {...animationProps} />;
+};
+
+export default LibIcon;
--- a/web/src/features/dev/index.tsx
+++ b/web/src/features/dev/index.tsx
@@ -10,6 +10,7 @@ import { debugTextUI } from './debug/textui';
 import { debugSkillCheck } from './debug/skillcheck';
 import { useState } from 'react';
 import { debugRadial } from './debug/radial';
+import LibIcon from '../../components/LibIcon';

 const Dev: React.FC = () => {
  const [opened, setOpened] = useState(false);
@@ -27,7 +28,7 @@ const Dev: React.FC = () => {
          mr={50}
          mb={50}
        >
-          <FontAwesomeIcon icon="wrench" fontSize={24} />
+          <LibIcon icon="wrench" fontSize={24} />
        </ActionIcon>
      </Tooltip>

--- a/web/src/features/dialog/components/fields/color.tsx
+++ b/web/src/features/dialog/components/fields/color.tsx
@@ -3,6 +3,7 @@ import { Control, useController } from 'react-hook-form';
 import { FormValues } from '../../InputDialog';
 import { ColorInput } from '@mantine/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import LibIcon from '../../../../components/LibIcon';

 interface Props {
  row: IColorInput;
@@ -32,7 +33,7 @@ const ColorField: React.FC<Props> = (props) => {
      defaultValue={props.row.default}
      format={props.row.format}
      withAsterisk={props.row.required}
-      icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
+      icon={props.row.icon && <LibIcon icon={props.row.icon} fixedWidth />}
    />
  );
 };
--- a/web/src/features/dialog/components/fields/date.tsx
+++ b/web/src/features/dialog/components/fields/date.tsx
@@ -3,6 +3,7 @@ import { Control, useController } from 'react-hook-form';
 import { FormValues } from '../../InputDialog';
 import { DatePicker, DateRangePicker } from '@mantine/dates';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import LibIcon from '../../../../components/LibIcon';

 interface Props {
  row: IDateInput;
@@ -34,7 +35,7 @@ const DateField: React.FC<Props> = (props) => {
          inputFormat={props.row.format}
          withAsterisk={props.row.required}
          clearable={props.row.clearable}
-          icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />}
+          icon={props.row.icon && <LibIcon fixedWidth icon={props.row.icon} />}
          minDate={props.row.min ? new Date(props.row.min) : undefined}
          maxDate={props.row.max ? new Date(props.row.max) : undefined}
        />
@@ -51,7 +52,9 @@ const DateField: React.FC<Props> = (props) => {
          name={controller.field.name}
          ref={controller.field.ref}
          onBlur={controller.field.onBlur}
-          onChange={(dates) => controller.field.onChange(dates.map((date: Date | null) => date ? date.getTime() : null))}
+          onChange={(dates) =>
+            controller.field.onChange(dates.map((date: Date | null) => (date ? date.getTime() : null)))
+          }
          label={props.row.label}
          description={props.row.description}
          placeholder={props.row.format}
@@ -59,7 +62,7 @@ const DateField: React.FC<Props> = (props) => {
          inputFormat={props.row.format}
          withAsterisk={props.row.required}
          clearable={props.row.clearable}
-          icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />}
+          icon={props.row.icon && <LibIcon fixedWidth icon={props.row.icon} />}
          minDate={props.row.min ? new Date(props.row.min) : undefined}
          maxDate={props.row.max ? new Date(props.row.max) : undefined}
        />
--- a/web/src/features/dialog/components/fields/input.tsx
+++ b/web/src/features/dialog/components/fields/input.tsx
@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { IInput } from '../../../../typings/dialog';
 import { UseFormRegisterReturn } from 'react-hook-form';
+import LibIcon from '../../../../components/LibIcon';

 interface Props {
  register: UseFormRegisterReturn;
@@ -27,7 +28,7 @@ const InputField: React.FC<Props> = (props) => {
          defaultValue={props.row.default}
          label={props.row.label}
          description={props.row.description}
-          icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
+          icon={props.row.icon && <LibIcon icon={props.row.icon} fixedWidth />}
          placeholder={props.row.placeholder}
          minLength={props.row.min}
          maxLength={props.row.max}
@@ -40,14 +41,14 @@ const InputField: React.FC<Props> = (props) => {
          defaultValue={props.row.default}
          label={props.row.label}
          description={props.row.description}
-          icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
+          icon={props.row.icon && <LibIcon icon={props.row.icon} fixedWidth />}
          placeholder={props.row.placeholder}
          minLength={props.row.min}
          maxLength={props.row.max}
          disabled={props.row.disabled}
          withAsterisk={props.row.required}
          visibilityToggleIcon={({ reveal, size }) => (
-            <FontAwesomeIcon
+            <LibIcon
              icon={reveal ? 'eye-slash' : 'eye'}
              fontSize={size}
              cursor="pointer"
--- a/web/src/features/dialog/components/fields/number.tsx
+++ b/web/src/features/dialog/components/fields/number.tsx
@@ -3,6 +3,7 @@ import { INumber } from '../../../../typings/dialog';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Control, useController } from 'react-hook-form';
 import { FormValues } from '../../InputDialog';
+import LibIcon from '../../../../components/LibIcon';

 interface Props {
  row: INumber;
@@ -33,7 +34,7 @@ const NumberField: React.FC<Props> = (props) => {
      step={props.row.step}
      precision={props.row.precision}
      disabled={props.row.disabled}
-      icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
+      icon={props.row.icon && <LibIcon icon={props.row.icon} fixedWidth />}
      withAsterisk={props.row.required}
    />
  );
--- a/web/src/features/dialog/components/fields/select.tsx
+++ b/web/src/features/dialog/components/fields/select.tsx
@@ -3,6 +3,7 @@ import { ISelect } from '../../../../typings';
 import { Control, useController } from 'react-hook-form';
 import { FormValues } from '../../InputDialog';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import LibIcon from '../../../../components/LibIcon';

 interface Props {
  row: ISelect;
@@ -32,7 +33,7 @@ const SelectField: React.FC<Props> = (props) => {
          description={props.row.description}
          withAsterisk={props.row.required}
          clearable={props.row.clearable}
-          icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
+          icon={props.row.icon && <LibIcon icon={props.row.icon} fixedWidth />}
        />
      ) : (
        <>
@@ -49,7 +50,7 @@ const SelectField: React.FC<Props> = (props) => {
              description={props.row.description}
              withAsterisk={props.row.required}
              clearable={props.row.clearable}
-              icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
+              icon={props.row.icon && <LibIcon icon={props.row.icon} fixedWidth />}
            />
          )}
        </>
--- a/web/src/features/dialog/components/fields/textarea.tsx
+++ b/web/src/features/dialog/components/fields/textarea.tsx
@@ -1,8 +1,8 @@
 import { Textarea } from '@mantine/core';
 import { UseFormRegisterReturn } from 'react-hook-form';
 import { ITextarea } from '../../../../typings/dialog';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
+import LibIcon from '../../../../components/LibIcon';

 interface Props {
  register: UseFormRegisterReturn;
@@ -17,7 +17,7 @@ const TextareaField: React.FC<Props> = (props) => {
      defaultValue={props.row.default}
      label={props.row.label}
      description={props.row.description}
-      icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
+      icon={props.row.icon && <LibIcon icon={props.row.icon} fixedWidth />}
      placeholder={props.row.placeholder}
      disabled={props.row.disabled}
      withAsterisk={props.row.required}
--- a/web/src/features/dialog/components/fields/time.tsx
+++ b/web/src/features/dialog/components/fields/time.tsx
@@ -1,8 +1,8 @@
 import { TimeInput } from '@mantine/dates';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Control, useController } from 'react-hook-form';
 import { ITimeInput } from '../../../../typings/dialog';
 import { FormValues } from '../../InputDialog';
+import LibIcon from '../../../../components/LibIcon';

 interface Props {
  row: ITimeInput;
@@ -30,7 +30,7 @@ const TimeField: React.FC<Props> = (props) => {
      format={props.row.format || '12'}
      withAsterisk={props.row.required}
      clearable={props.row.clearable}
-      icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />}
+      icon={props.row.icon && <LibIcon fixedWidth icon={props.row.icon} />}
    />
  );
 };
--- a/web/src/features/menu/context/components/ContextButton.tsx
+++ b/web/src/features/menu/context/components/ContextButton.tsx
@@ -1,11 +1,11 @@
 import { Button, Box, Group, Stack, Text, Progress, HoverCard, Image, createStyles } from '@mantine/core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import ReactMarkdown from 'react-markdown';
 import { Option, ContextMenuProps } from '../../../../typings';
 import { fetchNui } from '../../../../utils/fetchNui';
 import { isIconUrl } from '../../../../utils/isIconUrl';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import MarkdownComponents from '../../../../config/MarkdownComponents';
+import LibIcon from '../../../../components/LibIcon';

 const openMenu = (id: string | undefined) => {
  fetchNui<ContextMenuProps>('openContext', { id: id, back: false });
@@ -112,11 +112,12 @@ const ContextButton: React.FC<{
                        {typeof button.icon === 'string' && isIconUrl(button.icon) ? (
                          <img src={button.icon} className={classes.iconImage} alt="Missing img" />
                        ) : (
-                          <FontAwesomeIcon
+                          <LibIcon
                            icon={button.icon as IconProp}
                            fixedWidth
                            size="lg"
                            style={{ color: button.iconColor }}
+                            animation={button.iconAnimation}
                          />
                        )}
                      </Stack>
@@ -137,7 +138,7 @@ const ContextButton: React.FC<{
              </Stack>
              {(button.menu || button.arrow) && button.arrow !== false && (
                <Stack className={classes.buttonArrowContainer}>
-                  <FontAwesomeIcon icon="chevron-right" fixedWidth />
+                  <LibIcon icon="chevron-right" fixedWidth />
                </Stack>
              )}
            </Group>
--- a/web/src/features/menu/context/components/HeaderButton.tsx
+++ b/web/src/features/menu/context/components/HeaderButton.tsx
@@ -1,6 +1,7 @@
 import { Button, createStyles } from '@mantine/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import LibIcon from '../../../../components/LibIcon';

 interface Props {
  icon: IconProp;
@@ -38,7 +39,7 @@ const HeaderButton: React.FC<Props> = ({ icon, canClose, iconSize, handleClick }
      disabled={canClose === false}
      onClick={handleClick}
    >
-      <FontAwesomeIcon icon={icon} fontSize={iconSize} fixedWidth />
+      <LibIcon icon={icon} fontSize={iconSize} fixedWidth />
    </Button>
  );
 };
--- a/web/src/features/menu/list/ListItem.tsx
+++ b/web/src/features/menu/list/ListItem.tsx
@@ -1,11 +1,11 @@
 import { Box, Group, Stack, Text, Progress, Image } from '@mantine/core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { forwardRef } from 'react';
 import CustomCheckbox from './CustomCheckbox';
 import type { MenuItem } from '../../../typings';
 import { createStyles } from '@mantine/core';
 import { isIconUrl } from '../../../utils/isIconUrl';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import LibIcon from '../../../components/LibIcon';

 interface Props {
  item: MenuItem;
@@ -89,7 +89,12 @@ const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index,
            {typeof item.icon === 'string' && isIconUrl(item.icon) ? (
              <img src={item.icon} alt="Missing image" className={classes.iconImage} />
            ) : (
-              <FontAwesomeIcon icon={item.icon as IconProp} className={classes.icon} fixedWidth />
+              <LibIcon
+                icon={item.icon as IconProp}
+                className={classes.icon}
+                fixedWidth
+                animation={item.iconAnimation}
+              />
            )}
          </Box>
        )}
@@ -105,11 +110,11 @@ const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index,
              </Text>
            </Stack>
            <Group spacing={1} position="center">
-              <FontAwesomeIcon icon="chevron-left" className={classes.chevronIcon} />
+              <LibIcon icon="chevron-left" className={classes.chevronIcon} />
              <Text className={classes.scrollIndexValue}>
                {scrollIndex + 1}/{item.values.length}
              </Text>
-              <FontAwesomeIcon icon="chevron-right" className={classes.chevronIcon} />
+              <LibIcon icon="chevron-right" className={classes.chevronIcon} />
            </Group>
          </Group>
        ) : item.checked !== undefined ? (
--- a/web/src/features/menu/list/index.tsx
+++ b/web/src/features/menu/list/index.tsx
@@ -5,9 +5,9 @@ import ListItem from './ListItem';
 import Header from './Header';
 import FocusTrap from 'focus-trap-react';
 import { fetchNui } from '../../../utils/fetchNui';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import type { MenuPosition, MenuSettings } from '../../../typings';
+import LibIcon from '../../../components/LibIcon';

 const useStyles = createStyles((theme, params: { position?: MenuPosition; itemCount: number; selected: number }) => ({
  tooltip: {
@@ -28,7 +28,7 @@ const useStyles = createStyles((theme, params: { position?: MenuPosition; itemCo
    left: params.position === 'bottom-left' ? 1 : undefined,
    bottom: params.position === 'bottom-left' || params.position === 'bottom-right' ? 1 : undefined,
    fontFamily: 'Roboto',
-    width: 384
+    width: 384,
  },
  buttonsWrapper: {
    height: 'fit-content',
@@ -239,7 +239,7 @@ const ListMenu: React.FC = () => {
            </Box>
            {menu.items.length > 6 && selected !== menu.items.length - 1 && (
              <Box className={classes.scrollArrow}>
-                <FontAwesomeIcon icon="chevron-down" className={classes.scrollArrowIcon} />
+                <LibIcon icon="chevron-down" className={classes.scrollArrowIcon} />
              </Box>
            )}
          </Box>
--- a/web/src/features/menu/radial/index.tsx
+++ b/web/src/features/menu/radial/index.tsx
@@ -6,6 +6,7 @@ import { fetchNui } from '../../../utils/fetchNui';
 import ScaleFade from '../../../transitions/ScaleFade';
 import type { RadialMenuItem } from '../../../typings';
 import { useLocales } from '../../../providers/LocaleProvider';
+import LibIcon from '../../../components/LibIcon';

 const useStyles = createStyles((theme) => ({
  wrapper: {
@@ -81,18 +82,23 @@ const RadialMenu: React.FC = () => {

  useEffect(() => {
    if (menu.items.length <= PAGE_ITEMS) return setMenuItems(menu.items);
-    const items = menu.items.slice(PAGE_ITEMS * (menu.page - 1) - (menu.page - 1), PAGE_ITEMS * menu.page - menu.page + 1);
+    const items = menu.items.slice(
+      PAGE_ITEMS * (menu.page - 1) - (menu.page - 1),
+      PAGE_ITEMS * menu.page - menu.page + 1
+    );
    if (PAGE_ITEMS * menu.page - menu.page + 1 < menu.items.length) {
      items[items.length - 1] = { icon: 'ellipsis-h', label: locale.ui.more, isMore: true };
    }
    setMenuItems(items);
  }, [menu.items, menu.page]);

-  useNuiEvent('openRadialMenu', async (data: { items: RadialMenuItem[]; sub?: boolean, option?: string } | false) => {
+  useNuiEvent('openRadialMenu', async (data: { items: RadialMenuItem[]; sub?: boolean; option?: string } | false) => {
    if (!data) return setVisible(false);
    let initialPage = 1;
    if (data.option) {
-      data.items.findIndex((item, index) => item.menu == data.option && (initialPage = Math.floor(index / PAGE_ITEMS) + 1));
+      data.items.findIndex(
+        (item, index) => item.menu == data.option && (initialPage = Math.floor(index / PAGE_ITEMS) + 1)
+      );
    }
    setMenu({ ...data, page: initialPage });
    setVisible(true);
@@ -134,7 +140,8 @@ const RadialMenu: React.FC = () => {
                    transform={`rotate(-${index * pieAngle} 175 175) translate(${sinAngle * gap}, ${cosAngle * gap})`}
                    className={classes.sector}
                    onClick={async () => {
-                      const clickIndex = menu.page === 1 ? index : PAGE_ITEMS * (menu.page - 1) - (menu.page - 1) + index;
+                      const clickIndex =
+                        menu.page === 1 ? index : PAGE_ITEMS * (menu.page - 1) - (menu.page - 1) + index;
                      if (!item.isMore) fetchNui('radialClick', clickIndex);
                      else {
                        await changePage(true);
@@ -147,19 +154,21 @@ const RadialMenu: React.FC = () => {
                      }, ${175 + (175 - gap) * Math.sin(-degToRad(pieAngle))} z`}
                    />
                    <g transform={`rotate(${index * pieAngle - 90} ${iconX} ${iconY})`} pointerEvents="none">
-                      <FontAwesomeIcon
-                        x={iconX - 12.5}
-                        y={iconY - 17.5}
-                        icon={item.icon}
-                        width={25}
-                        height={25}
-                        fixedWidth
-                      />
-                      <text x={iconX} y={iconY + (item.label.includes("  \n") ? 7 : 25)} fill="#fff" textAnchor="middle" pointerEvents="none">
-                        {item.label.includes("  \n")
-                          ? item.label.split("  \n").map((value) => <tspan x={iconX} dy="1.2em">{value}</tspan>)
-                          : item.label
-                        }
+                      <LibIcon x={iconX - 12.5} y={iconY - 17.5} icon={item.icon} width={25} height={25} fixedWidth />
+                      <text
+                        x={iconX}
+                        y={iconY + (item.label.includes('  \n') ? 7 : 25)}
+                        fill="#fff"
+                        textAnchor="middle"
+                        pointerEvents="none"
+                      >
+                        {item.label.includes('  \n')
+                          ? item.label.split('  \n').map((value) => (
+                              <tspan x={iconX} dy="1.2em">
+                                {value}
+                              </tspan>
+                            ))
+                          : item.label}
                      </text>
                    </g>
                  </g>
@@ -183,7 +192,7 @@ const RadialMenu: React.FC = () => {
            </g>
          </svg>
          <div className={classes.centerIconContainer}>
-            <FontAwesomeIcon
+            <LibIcon
              icon={!menu.sub && menu.page < 2 ? 'xmark' : 'arrow-rotate-left'}
              fixedWidth
              className={classes.centerIcon}
--- a/web/src/features/notifications/NotificationWrapper.tsx
+++ b/web/src/features/notifications/NotificationWrapper.tsx
@@ -6,6 +6,7 @@ import { Avatar, createStyles, Group, Stack, Box, Text, keyframes, Sx } from '@m
 import React from 'react';
 import type { NotificationProps } from '../../typings';
 import MarkdownComponents from '../../config/MarkdownComponents';
+import LibIcon from '../../components/LibIcon';

 const useStyles = createStyles((theme) => ({
  container: {
@@ -173,11 +174,12 @@ const Notifications: React.FC = () => {
                    radius="xl"
                    size={32}
                  >
-                    <FontAwesomeIcon icon={data.icon} fixedWidth size="lg" />
+                    <LibIcon icon={data.icon} fixedWidth size="lg" />
                  </Avatar>
                ) : (
-                  <FontAwesomeIcon
+                  <LibIcon
                    icon={data.icon}
+                    animation={data.iconAnimation}
                    style={{
                      color: data.iconColor,
                      alignSelf: !data.alignIcon || data.alignIcon === 'center' ? 'center' : 'start',
--- a/web/src/features/textui/TextUI.tsx
+++ b/web/src/features/textui/TextUI.tsx
@@ -7,6 +7,7 @@ import ScaleFade from '../../transitions/ScaleFade';
 import remarkGfm from 'remark-gfm';
 import type { TextUiProps, TextUiPosition } from '../../typings';
 import MarkdownComponents from '../../config/MarkdownComponents';
+import LibIcon from '../../components/LibIcon';

 const useStyles = createStyles((theme, params: { position?: TextUiPosition }) => ({
  wrapper: {
@@ -53,10 +54,11 @@ const TextUI: React.FC = () => {
          <Box style={data.style} className={classes.container}>
            <Group spacing={12}>
              {data.icon && (
-                <FontAwesomeIcon
+                <LibIcon
                  icon={data.icon}
                  fixedWidth
                  size="lg"
+                  animation={data.iconAnimation}
                  style={{
                    color: data.iconColor,
                    alignSelf: !data.alignIcon || data.alignIcon === 'center' ? 'center' : 'start',
--- a/web/src/typings/context.ts
+++ b/web/src/typings/context.ts
@@ -1,4 +1,5 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { IconAnimation } from '../components/LibIcon';

 export interface Option {
  menu?: string;
@@ -8,6 +9,7 @@ export interface Option {
  image?: string;
  icon?: IconProp | string;
  iconColor?: string;
+  iconAnimation?: IconAnimation;
  progress?: number;
  colorScheme?: string;
  readOnly?: boolean;
--- a/web/src/typings/menu.ts
+++ b/web/src/typings/menu.ts
@@ -1,4 +1,5 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { IconAnimation } from '../components/LibIcon';

 export type MenuPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';

@@ -12,6 +13,7 @@ export interface MenuItem {
  description?: string;
  icon?: IconProp | string;
  iconColor?: string;
+  iconAnimation?: IconAnimation;
  defaultIndex?: number;
  close?: boolean;
 }
--- a/web/src/typings/notifications.ts
+++ b/web/src/typings/notifications.ts
@@ -1,6 +1,7 @@
 import { ToastPosition } from 'react-hot-toast';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { Sx } from '@mantine/core';
+import { IconAnimation } from '../components/LibIcon';

 export interface NotificationProps {
  style?: Sx;
@@ -9,6 +10,7 @@ export interface NotificationProps {
  duration?: number;
  icon?: IconProp;
  iconColor?: string;
+  iconAnimation?: IconAnimation;
  position?: ToastPosition | 'top' | 'bottom';
  id?: number | string;
  type?: string;
--- a/web/src/typings/textui.ts
+++ b/web/src/typings/textui.ts
@@ -1,5 +1,6 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import React from 'react';
+import { IconAnimation } from '../components/LibIcon';

 export type TextUiPosition = 'right-center' | 'left-center' | 'top-center';

@@ -8,6 +9,7 @@ export interface TextUiProps {
  position?: TextUiPosition;
  icon?: IconProp;
  iconColor?: string;
+  iconAnimation?: IconAnimation;
  style?: React.CSSProperties;
  alignIcon?: 'top' | 'center';
 }