diff --git a/examples/vite/src/AppSettings/AppSettings.tsx b/examples/vite/src/AppSettings/AppSettings.tsx index 39b163b6e..0402fcf76 100644 --- a/examples/vite/src/AppSettings/AppSettings.tsx +++ b/examples/vite/src/AppSettings/AppSettings.tsx @@ -2,8 +2,8 @@ import { Button, ChatViewSelectorButton, GlobalModal, - IconCog, - IconEmoji, + IconEmojiSmile, + IconSettingsGear2, } from 'stream-chat-react'; import { type ComponentType, useState } from 'react'; import { ReactionsTab } from './tabs/Reactions'; @@ -11,7 +11,7 @@ import { ReactionsTab } from './tabs/Reactions'; type TabId = 'reactions'; const tabConfig: { Icon: ComponentType; id: TabId; title: string }[] = [ - { Icon: IconEmoji, id: 'reactions', title: 'Reactions' }, + { Icon: IconEmojiSmile, id: 'reactions', title: 'Reactions' }, ]; export const AppSettings = () => { @@ -21,14 +21,14 @@ export const AppSettings = () => { return (
setOpen(true)} text='Settings' /> setOpen(false)}>
- + Settings
diff --git a/src/components/Attachment/styling/Attachment.scss b/src/components/Attachment/styling/Attachment.scss index eba73d80f..be3109034 100644 --- a/src/components/Attachment/styling/Attachment.scss +++ b/src/components/Attachment/styling/Attachment.scss @@ -633,6 +633,7 @@ .str-chat__message_attachment__playback-rate-button { @include utils.flex-row-center; @include utils.button-reset; + text-transform: none; display: flex; justify-content: center; align-items: center; diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index e2defda74..d0748cbad 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -5,7 +5,7 @@ import React, { useMemo, useState, } from 'react'; -import { IconPerson } from '../Icons'; +import { IconPeople } from '../Icons'; export type AvatarProps = { /** URL of the avatar image */ @@ -99,7 +99,7 @@ export const Avatar = ({ {sizeAwareInitials}
)} - {!sizeAwareInitials.length && } + {!sizeAwareInitials.length && } )}
diff --git a/src/components/Dialog/base/Callout.tsx b/src/components/Dialog/base/Callout.tsx index 7cc6a4da3..19dc125dd 100644 --- a/src/components/Dialog/base/Callout.tsx +++ b/src/components/Dialog/base/Callout.tsx @@ -3,7 +3,7 @@ import { DialogAnchor, type DialogAnchorProps } from '../service'; import { useDialogIsOpen } from '../hooks'; import { Button } from '../../Button'; import clsx from 'clsx'; -import { IconCross } from '../../Icons'; +import { IconCrossMedium } from '../../Icons'; import { useComponentContext } from '../../../context'; export type CalloutProps = PropsWithChildren< @@ -64,7 +64,7 @@ const DefaultCalloutDialog = ({ children, className, onClose }: CalloutDialogPro )} onClick={onClose} > - +
); diff --git a/src/components/Dialog/base/ContextMenu.tsx b/src/components/Dialog/base/ContextMenu.tsx index 0bb89fc94..a05fc776e 100644 --- a/src/components/Dialog/base/ContextMenu.tsx +++ b/src/components/Dialog/base/ContextMenu.tsx @@ -9,7 +9,7 @@ import React, { useState, } from 'react'; import clsx from 'clsx'; -import { IconChevronRight } from '../../Icons'; +import { IconChevronLeft } from '../../Icons'; export const ContextMenuBackButton = ({ children, @@ -176,7 +176,7 @@ export const ContextMenu = ({ ) : menuStack.length > 1 ? ( - + {backLabel} diff --git a/src/components/Form/NumericInput.tsx b/src/components/Form/NumericInput.tsx index 61ebf8f3a..3965c8e16 100644 --- a/src/components/Form/NumericInput.tsx +++ b/src/components/Form/NumericInput.tsx @@ -2,7 +2,7 @@ import clsx from 'clsx'; import React, { forwardRef, useCallback } from 'react'; import type { ChangeEvent, ComponentProps, KeyboardEvent } from 'react'; import { useStableId } from '../UtilityComponents/useStableId'; -import { IconPlus } from '../Icons'; +import { IconPlusSmall } from '../Icons'; import { Button } from '../Button'; export type NumericInputProps = Omit< @@ -154,7 +154,7 @@ export const NumericInput = forwardRef( disabled={disabled || atMax} onClick={handleIncrement} > - + diff --git a/src/components/Gallery/GalleryUI.tsx b/src/components/Gallery/GalleryUI.tsx index af1d633da..1cb5307eb 100644 --- a/src/components/Gallery/GalleryUI.tsx +++ b/src/components/Gallery/GalleryUI.tsx @@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; import { BaseImage } from './BaseImage'; import { useGalleryContext } from './GalleryContext'; import { Button, type ButtonProps } from '../Button'; -import { IconChevronRight } from '../Icons'; +import { IconChevronLeft, IconChevronRight } from '../Icons'; import { useTranslationContext } from '../../context'; import { VideoPlayer } from '../VideoPlayer'; import { VideoThumbnail } from '../VideoPlayer/VideoThumbnail'; @@ -176,7 +176,7 @@ export const GalleryUI = () => { disabled={!hasPrevious} onClick={handleGoToPrevious} > - +
) => ( ) => ( - - - -); diff --git a/src/components/Icons/IconBin.tsx b/src/components/Icons/IconBin.tsx deleted file mode 100644 index fa61d62bf..000000000 --- a/src/components/Icons/IconBin.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { ComponentProps } from 'react'; -import { BaseIcon } from './BaseIcon'; -import clsx from 'clsx'; - -export const IconBin = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconCamera.tsx b/src/components/Icons/IconCamera.tsx deleted file mode 100644 index 65e7cc7e2..000000000 --- a/src/components/Icons/IconCamera.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import type { ComponentProps } from 'react'; -import clsx from 'clsx'; -import { BaseIcon } from './BaseIcon'; - -export const IconCamera = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - - -); diff --git a/src/components/Icons/IconChainLink.tsx b/src/components/Icons/IconChainLink.tsx deleted file mode 100644 index f66b9d20f..000000000 --- a/src/components/Icons/IconChainLink.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { ComponentProps } from 'react'; -import clsx from 'clsx'; -import { BaseIcon } from './BaseIcon'; - -export const IconChainLink = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - - - - - - - - -); diff --git a/src/components/Icons/IconCheckmark.tsx b/src/components/Icons/IconCheckmark.tsx deleted file mode 100644 index 0426bdf8c..000000000 --- a/src/components/Icons/IconCheckmark.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { type ComponentProps } from 'react'; -import { BaseIcon } from './BaseIcon'; -import clsx from 'clsx'; - -export const IconCheckmark = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconCheckmark2.tsx b/src/components/Icons/IconCheckmark2.tsx deleted file mode 100644 index dba9932b6..000000000 --- a/src/components/Icons/IconCheckmark2.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { BaseIcon } from './BaseIcon'; -import clsx from 'clsx'; -import type { ComponentProps } from 'react'; - -export const IconCheckmark2 = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconChevronRight.tsx b/src/components/Icons/IconChevronRight.tsx deleted file mode 100644 index bc4750af1..000000000 --- a/src/components/Icons/IconChevronRight.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import clsx from 'clsx'; -import type { ComponentProps } from 'react'; -import { BaseIcon } from './BaseIcon'; - -export const IconChevronRight = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconCircleMinus.tsx b/src/components/Icons/IconCircleMinus.tsx deleted file mode 100644 index a89a6a473..000000000 --- a/src/components/Icons/IconCircleMinus.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { ComponentProps } from 'react'; -import { BaseIcon } from './BaseIcon'; -import clsx from 'clsx'; - -export const IconCircleMinus = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconClose.tsx b/src/components/Icons/IconClose.tsx deleted file mode 100644 index 77e40ad34..000000000 --- a/src/components/Icons/IconClose.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { type ComponentProps } from 'react'; -import clsx from 'clsx'; -import { BaseIcon } from './BaseIcon'; - -export const IconClose = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconCog.tsx b/src/components/Icons/IconCog.tsx deleted file mode 100644 index e9b548f2a..000000000 --- a/src/components/Icons/IconCog.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { BaseIcon } from './BaseIcon'; -import type { ComponentProps } from 'react'; -import clsx from 'clsx'; - -export const IconCog = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconCommand.tsx b/src/components/Icons/IconCommand.tsx deleted file mode 100644 index 05c74bb46..000000000 --- a/src/components/Icons/IconCommand.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { ComponentProps } from 'react'; -import clsx from 'clsx'; -import { BaseIcon } from './BaseIcon'; - -export const IconCommand = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconCross.tsx b/src/components/Icons/IconCross.tsx deleted file mode 100644 index 523588587..000000000 --- a/src/components/Icons/IconCross.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { type ComponentProps } from 'react'; -import { BaseIcon } from './BaseIcon'; -import clsx from 'clsx'; - -export const IconCross = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconDotGrid2x3.tsx b/src/components/Icons/IconDotGrid2x3.tsx deleted file mode 100644 index 60f43d210..000000000 --- a/src/components/Icons/IconDotGrid2x3.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { BaseIcon } from './BaseIcon'; -import type { ComponentProps } from 'react'; -import clsx from 'clsx'; - -export const IconDotGrid2x3 = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - - - - - - -); diff --git a/src/components/Icons/IconDoubleCheckmark.tsx b/src/components/Icons/IconDoubleCheckmark.tsx deleted file mode 100644 index c5d376efe..000000000 --- a/src/components/Icons/IconDoubleCheckmark.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { ComponentProps } from 'react'; -import { BaseIcon } from './BaseIcon'; -import clsx from 'clsx'; - -export const IconDoubleCheckmark = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconEmoji.tsx b/src/components/Icons/IconEmoji.tsx deleted file mode 100644 index 55b866265..000000000 --- a/src/components/Icons/IconEmoji.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { BaseIcon } from './BaseIcon'; -import type { ComponentProps } from 'react'; -import clsx from 'clsx'; - -export const IconEmoji = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - - - - -); diff --git a/src/components/Icons/IconExclamationCircle.tsx b/src/components/Icons/IconExclamationCircle.tsx deleted file mode 100644 index c39e1bcfd..000000000 --- a/src/components/Icons/IconExclamationCircle.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import type { ComponentProps } from 'react'; -import clsx from 'clsx'; -import { BaseIcon } from './BaseIcon'; - -export const IconExclamationCircle = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconExclamationTriangle.tsx b/src/components/Icons/IconExclamationTriangle.tsx deleted file mode 100644 index 372d53e7a..000000000 --- a/src/components/Icons/IconExclamationTriangle.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import clsx from 'clsx'; -import type { ComponentProps } from 'react'; -import { BaseIcon } from './BaseIcon'; - -export const IconExclamationTriangle = ({ - className, - ...props -}: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconEyeOpen.tsx b/src/components/Icons/IconEyeOpen.tsx deleted file mode 100644 index 5f202d0ab..000000000 --- a/src/components/Icons/IconEyeOpen.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { BaseIcon } from './BaseIcon'; -import clsx from 'clsx'; -import type { ComponentProps } from 'react'; - -export const IconEyeOpen = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconFile.tsx b/src/components/Icons/IconFile.tsx deleted file mode 100644 index 39cd5cb98..000000000 --- a/src/components/Icons/IconFile.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { ComponentProps } from 'react'; -import clsx from 'clsx'; -import { BaseIcon } from './BaseIcon'; - -export const IconFile = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconFlag.tsx b/src/components/Icons/IconFlag.tsx deleted file mode 100644 index 508c9d037..000000000 --- a/src/components/Icons/IconFlag.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import clsx from 'clsx'; -import type { ComponentProps } from 'react'; - -export const IconFlag = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconLightning.tsx b/src/components/Icons/IconLightning.tsx deleted file mode 100644 index 1ad12159a..000000000 --- a/src/components/Icons/IconLightning.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { BaseIcon } from './BaseIcon'; -import type { ComponentProps } from 'react'; -import clsx from 'clsx'; - -export const IconLightning = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconLocationPin.tsx b/src/components/Icons/IconLocationPin.tsx deleted file mode 100644 index ca3232a1a..000000000 --- a/src/components/Icons/IconLocationPin.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import type { ComponentProps } from 'react'; -import clsx from 'clsx'; -import { BaseIcon } from './BaseIcon'; - -export const IconLocationPin = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - - -); diff --git a/src/components/Icons/IconMicrophone.tsx b/src/components/Icons/IconMicrophone.tsx deleted file mode 100644 index fc6737998..000000000 --- a/src/components/Icons/IconMicrophone.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { ComponentProps } from 'react'; -import clsx from 'clsx'; -import { BaseIcon } from './BaseIcon'; - -export const IconMicrophone = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconMute.tsx b/src/components/Icons/IconMute.tsx deleted file mode 100644 index caf3d5e21..000000000 --- a/src/components/Icons/IconMute.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import type { ComponentProps } from 'react'; -import { BaseIcon } from './BaseIcon'; -import clsx from 'clsx'; - -export const IconMute = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - - -); diff --git a/src/components/Icons/IconPaperPlane.tsx b/src/components/Icons/IconPaperPlane.tsx deleted file mode 100644 index 7d48e3114..000000000 --- a/src/components/Icons/IconPaperPlane.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type { ComponentProps } from 'react'; -import clsx from 'clsx'; -import { BaseIcon } from './BaseIcon'; - -export const IconPaperPlane = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconPaperclip.tsx b/src/components/Icons/IconPaperclip.tsx deleted file mode 100644 index 73f587434..000000000 --- a/src/components/Icons/IconPaperclip.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import clsx from 'clsx'; -import { BaseIcon } from './BaseIcon'; -import type { ComponentProps } from 'react'; - -export const IconPaperclip = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconPause.tsx b/src/components/Icons/IconPause.tsx deleted file mode 100644 index cc98cd96c..000000000 --- a/src/components/Icons/IconPause.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import type { ComponentProps } from 'react'; -import clsx from 'clsx'; -import { BaseIcon } from './BaseIcon'; - -export const IconPause = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - - -); diff --git a/src/components/Icons/IconPerson.tsx b/src/components/Icons/IconPerson.tsx deleted file mode 100644 index 3881017ce..000000000 --- a/src/components/Icons/IconPerson.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import type { ComponentProps } from 'react'; -import clsx from 'clsx'; -import { BaseIcon } from './BaseIcon'; - -export const IconPerson = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - - -); diff --git a/src/components/Icons/IconPersonAdd.tsx b/src/components/Icons/IconPersonAdd.tsx deleted file mode 100644 index c36c8c950..000000000 --- a/src/components/Icons/IconPersonAdd.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { ComponentProps } from 'react'; -import { BaseIcon } from './BaseIcon'; -import clsx from 'clsx'; - -export const IconPersonAdd = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconPersonRemove.tsx b/src/components/Icons/IconPersonRemove.tsx deleted file mode 100644 index 3fb310d4c..000000000 --- a/src/components/Icons/IconPersonRemove.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import clsx from 'clsx'; -import { BaseIcon } from './BaseIcon'; -import type { ComponentProps } from 'react'; - -export const IconPersonRemove = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconPlaySolid.tsx b/src/components/Icons/IconPlaySolid.tsx deleted file mode 100644 index 5eebd8f42..000000000 --- a/src/components/Icons/IconPlaySolid.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import clsx from 'clsx'; -import type { ComponentProps } from 'react'; -import { BaseIcon } from './BaseIcon'; - -export const IconPlaySolid = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconPlus.tsx b/src/components/Icons/IconPlus.tsx deleted file mode 100644 index 58d9cbe44..000000000 --- a/src/components/Icons/IconPlus.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { ComponentProps } from 'react'; -import clsx from 'clsx'; -import { BaseIcon } from './BaseIcon'; - -export const IconPlus = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconPoll.tsx b/src/components/Icons/IconPoll.tsx deleted file mode 100644 index e630ed3f6..000000000 --- a/src/components/Icons/IconPoll.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import clsx from 'clsx'; -import type { ComponentProps } from 'react'; -import { BaseIcon } from './BaseIcon'; - -export const IconPoll = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconSingleCheckmark.tsx b/src/components/Icons/IconSingleCheckmark.tsx deleted file mode 100644 index 53ae81daa..000000000 --- a/src/components/Icons/IconSingleCheckmark.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { ComponentProps } from 'react'; -import clsx from 'clsx'; -import { BaseIcon } from './BaseIcon'; - -export const IconSingleCheckmark = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconVideoCamera.tsx b/src/components/Icons/IconVideoCamera.tsx deleted file mode 100644 index 591238fda..000000000 --- a/src/components/Icons/IconVideoCamera.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import type { ComponentProps } from 'react'; -import clsx from 'clsx'; -import { BaseIcon } from './BaseIcon'; - -export const IconVideoCamera = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/IconVideoCameraOutline.tsx b/src/components/Icons/IconVideoCameraOutline.tsx deleted file mode 100644 index c45dd9e38..000000000 --- a/src/components/Icons/IconVideoCameraOutline.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import type { ComponentProps } from 'react'; -import clsx from 'clsx'; -import { BaseIcon } from './BaseIcon'; - -export const IconVideoCameraOutline = ({ - className, - ...props -}: ComponentProps<'svg'>) => ( - - - - -); diff --git a/src/components/Icons/IconVolumeFull.tsx b/src/components/Icons/IconVolumeFull.tsx deleted file mode 100644 index c195fc5be..000000000 --- a/src/components/Icons/IconVolumeFull.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { ComponentProps } from 'react'; -import { BaseIcon } from './BaseIcon'; -import clsx from 'clsx'; - -export const IconVolumeFull = ({ className, ...props }: ComponentProps<'svg'>) => ( - - - -); diff --git a/src/components/Icons/createIcon.tsx b/src/components/Icons/createIcon.tsx new file mode 100644 index 000000000..3fd7067b8 --- /dev/null +++ b/src/components/Icons/createIcon.tsx @@ -0,0 +1,27 @@ +import { type ComponentProps, type ReactNode } from 'react'; +import clsx from 'clsx'; +import { BaseIcon } from './BaseIcon'; + +function toIconClass(name: string) { + return ( + 'str-chat__icon--' + + name + .replace(/^Icon/, '') + .replace(/([a-z])([A-Z])/g, '$1-$2') + .replace(/([A-Za-z])(\d)/g, '$1-$2') + .replace(/(\d)([A-Za-z])/g, '$1-$2') + .replace(/_/g, '-') + .toLowerCase() + ); +} + +export function createIcon(name: string, content: ReactNode) { + const iconClass = toIconClass(name); + const Icon = ({ className, ...props }: ComponentProps<'svg'>) => ( + + {content} + + ); + Icon.displayName = name; + return Icon; +} diff --git a/src/components/Icons/icons.tsx b/src/components/Icons/icons.tsx new file mode 100644 index 000000000..e839dab56 --- /dev/null +++ b/src/components/Icons/icons.tsx @@ -0,0 +1,895 @@ +import React from 'react'; + +import { createIcon } from './createIcon'; + +export const IconApiAggregate = createIcon( + 'IconApiAggregate', + , +); + +export const IconApples = createIcon( + 'IconApples', + , +); + +export const IconArrowBoxLeft = createIcon( + 'IconArrowBoxLeft', + , +); + +export const IconArrowDown = createIcon( + 'IconArrowDown', + , +); + +export const IconArrowLeft = createIcon( + 'IconArrowLeft', + , +); + +export const IconArrowRight = createIcon( + 'IconArrowRight', + , +); + +export const IconArrowRotateClockwise = createIcon( + 'IconArrowRotateClockwise', + , +); + +export const IconArrowRotateRightLeftRepeatRefresh = createIcon( + 'IconArrowRotateRightLeftRepeatRefresh', + , +); + +export const IconArrowShareLeft = createIcon( + 'IconArrowShareLeft', + , +); + +export const IconArrowUp = createIcon( + 'IconArrowUp', + , +); + +export const IconArrowsRepeatLeftRight = createIcon( + 'IconArrowsRepeatLeftRight', + , +); + +export const IconAt = createIcon( + 'IconAt', + , +); + +export const IconAtSolid = createIcon( + 'IconAtSolid', + , +); + +export const IconBellNotification = createIcon( + 'IconBellNotification', + , +); + +export const IconBookmark = createIcon( + 'IconBookmark', + , +); + +export const IconBrowserAISparkle = createIcon( + 'IconBrowserAISparkle', + <> + + + + + , +); + +export const IconBubble3ChatMessage = createIcon( + 'IconBubble3ChatMessage', + , +); + +export const IconBubble3Solid = createIcon( + 'IconBubble3Solid', + , +); + +export const IconBubbleAnnotation2ChatMessage = createIcon( + 'IconBubbleAnnotation2ChatMessage', + , +); + +export const IconBubbleText6ChatMessage = createIcon( + 'IconBubbleText6ChatMessage', + , +); + +export const IconBubbleText6Solid = createIcon( + 'IconBubbleText6Solid', + , +); + +export const IconBubbleWideNotificationChatMessage = createIcon( + 'IconBubbleWideNotificationChatMessage', + , +); + +export const IconBubbleWideSparkleChatMessage = createIcon( + 'IconBubbleWideSparkleChatMessage', + <> + + + , +); + +export const IconCalendar1 = createIcon( + 'IconCalendar1', + , +); + +export const IconCallCancel = createIcon( + 'IconCallCancel', + <> + + + , +); + +export const IconCamera1 = createIcon( + 'IconCamera1', + , +); + +export const IconCar1 = createIcon( + 'IconCar1', + , +); + +export const IconCat = createIcon( + 'IconCat', + <> + + + + + , +); + +export const IconChainLink = createIcon( + 'IconChainLink', + , +); + +export const IconChart5 = createIcon( + 'IconChart5', + , +); + +export const IconCheckmark1Small = createIcon( + 'IconCheckmark1Small', + , +); + +export const IconCheckmark2 = createIcon( + 'IconCheckmark2', + , +); + +export const IconCheckmark2Small = createIcon( + 'IconCheckmark2Small', + , +); + +export const IconChevronDown = createIcon( + 'IconChevronDown', + , +); + +export const IconChevronGrabberVerticalSelector = createIcon( + 'IconChevronGrabberVerticalSelector', + , +); + +export const IconChevronLeft = createIcon( + 'IconChevronLeft', + , +); + +export const IconChevronRight = createIcon( + 'IconChevronRight', + , +); + +export const IconChevronTop = createIcon( + 'IconChevronTop', + , +); + +export const IconCircleBanSign = createIcon( + 'IconCircleBanSign', + , +); + +export const IconCircleCheck = createIcon( + 'IconCircleCheck', + , +); + +export const IconCircleInfoTooltip = createIcon( + 'IconCircleInfoTooltip', + , +); + +export const IconCircleMinus = createIcon( + 'IconCircleMinus', + , +); + +export const IconCircleQuestionmark = createIcon( + 'IconCircleQuestionmark', + , +); + +export const IconCircleQuestionmarkFilled = createIcon( + 'IconCircleQuestionmarkFilled', + , +); + +export const IconCircleX = createIcon( + 'IconCircleX', + , +); + +export const IconClock = createIcon( + 'IconClock', + , +); + +export const IconClockSolid = createIcon( + 'IconClockSolid', + , +); + +export const IconCode = createIcon( + 'IconCode', + , +); + +export const IconCodeBrackets = createIcon( + 'IconCodeBrackets', + , +); + +export const IconCodeEditorInsert = createIcon( + 'IconCodeEditorInsert', + , +); + +export const IconCompass = createIcon( + 'IconCompass', + , +); + +export const IconCreditCard2Billing = createIcon( + 'IconCreditCard2Billing', + , +); + +export const IconCrossMedium = createIcon( + 'IconCrossMedium', + , +); + +export const IconCrossSmall = createIcon( + 'IconCrossSmall', + , +); + +export const IconDotGrid1x3Horizontal = createIcon( + 'IconDotGrid1x3Horizontal', + , +); + +export const IconDotGrid2x3 = createIcon( + 'IconDotGrid2x3', + <> + + + + + + + , +); + +export const IconDotsGrid1x3Vertical = createIcon( + 'IconDotsGrid1x3Vertical', + <> + + + + + , +); + +export const IconDoubleCheckmark1Small = createIcon( + 'IconDoubleCheckmark1Small', + , +); + +export const IconEditBig = createIcon( + 'IconEditBig', + <> + + + , +); + +export const IconEditBigSolid = createIcon( + 'IconEditBigSolid', + <> + + + , +); + +export const IconEmojiAddReaction = createIcon( + 'IconEmojiAddReaction', + , +); + +export const IconEmojiSad = createIcon( + 'IconEmojiSad', + <> + + + + + , +); + +export const IconEmojiSmile = createIcon( + 'IconEmojiSmile', + <> + + + + + , +); + +export const IconExclamationCircle1 = createIcon( + 'IconExclamationCircle1', + <> + + + + , +); + +export const IconExclamationCircle = createIcon( + 'IconExclamationCircle', + , +); + +export const IconExclamationTriangle1 = createIcon( + 'IconExclamationTriangle1', + , +); + +export const IconExclamationTriangle = createIcon( + 'IconExclamationTriangle', + , +); + +export const IconEyeOpen = createIcon( + 'IconEyeOpen', + , +); + +export const IconFileArrowLeftIn = createIcon( + 'IconFileArrowLeftIn', + , +); + +export const IconFileBend = createIcon( + 'IconFileBend', + , +); + +export const IconFilledCircleInfoTooltip = createIcon( + 'IconFilledCircleInfoTooltip', + , +); + +export const IconFilter1 = createIcon( + 'IconFilter1', + , +); + +export const IconFlag2 = createIcon( + 'IconFlag2', + , +); + +export const IconGauge = createIcon( + 'IconGauge', + , +); + +export const IconGoogle = createIcon( + 'IconGoogle', + <> + + + + + , +); + +export const IconHashtagChannel = createIcon( + 'IconHashtagChannel', + , +); + +export const IconHeart2 = createIcon( + 'IconHeart2', + , +); + +export const IconHistory = createIcon( + 'IconHistory', + , +); + +export const IconImages1Alt = createIcon( + 'IconImages1Alt', + , +); + +export const IconInvite = createIcon( + 'IconInvite', + , +); + +export const IconLayersBehind = createIcon( + 'IconLayersBehind', + , +); + +export const IconLayoutGrid1 = createIcon( + 'IconLayoutGrid1', + , +); + +export const IconLightBulbSimple = createIcon( + 'IconLightBulbSimple', + <> + + + , +); + +export const IconLimits = createIcon( + 'IconLimits', + , +); + +export const IconLineChart3 = createIcon( + 'IconLineChart3', + , +); + +export const IconLock = createIcon( + 'IconLock', + , +); + +export const IconMagnifyingGlassSearch = createIcon( + 'IconMagnifyingGlassSearch', + , +); + +export const IconMapPin = createIcon( + 'IconMapPin', + , +); + +export const IconMicrophone = createIcon( + 'IconMicrophone', + , +); + +export const IconMicrophoneSolid = createIcon( + 'IconMicrophoneSolid', + <> + + + , +); + +export const IconMinusLarge = createIcon( + 'IconMinusLarge', + , +); + +export const IconMinusSmall = createIcon( + 'IconMinusSmall', + , +); + +export const IconMute = createIcon( + 'IconMute', + <> + + + , +); + +export const IconNewspaper2 = createIcon( + 'IconNewspaper2', + , +); + +export const IconOrganization = createIcon( + 'IconOrganization', + , +); + +export const IconPaperPlane = createIcon( + 'IconPaperPlane', + , +); + +export const IconPaperPlaneTopRight = createIcon( + 'IconPaperPlaneTopRight', + , +); + +export const IconPaperclip = createIcon( + 'IconPaperclip', + , +); + +export const IconParagraphsText = createIcon( + 'IconParagraphsText', + , +); + +export const IconPause = createIcon( + 'IconPause', + <> + + + , +); + +export const IconPencil = createIcon( + 'IconPencil', + , +); + +export const IconPeople = createIcon( + 'IconPeople', + , +); + +export const IconPeople2 = createIcon( + 'IconPeople2', + , +); + +export const IconPeopleAdd = createIcon( + 'IconPeopleAdd', + , +); + +export const IconPeopleAdded = createIcon( + 'IconPeopleAdded', + <> + + + + , +); + +export const IconPeopleCircle = createIcon( + 'IconPeopleCircle', + , +); + +export const IconPeopleCopy = createIcon( + 'IconPeopleCopy', + , +); + +export const IconPeopleEditUserRights = createIcon( + 'IconPeopleEditUserRights', + , +); + +export const IconPeopleRemove = createIcon( + 'IconPeopleRemove', + <> + + + + , +); + +export const IconPersona = createIcon( + 'IconPersona', + <> + + + + + + + + + + + + + + + + , +); + +export const IconPin = createIcon( + 'IconPin', + , +); + +export const IconPlaySolid = createIcon( + 'IconPlaySolid', + , +); + +export const IconPlusLarge = createIcon( + 'IconPlusLarge', + , +); + +export const IconPlusSmall = createIcon( + 'IconPlusSmall', + , +); + +export const IconRunShortcut = createIcon( + 'IconRunShortcut', + , +); + +export const IconSearchText = createIcon( + 'IconSearchText', + , +); + +export const IconSettingsGear2 = createIcon( + 'IconSettingsGear2', + , +); + +export const IconSettingsSliderVer = createIcon( + 'IconSettingsSliderVer', + , +); + +export const IconShapesPlusCloseSquareCircle = createIcon( + 'IconShapesPlusCloseSquareCircle', + , +); + +export const IconShapesTriangleSquareCircle = createIcon( + 'IconShapesTriangleSquareCircle', + , +); + +export const IconShareRedirectLink = createIcon( + 'IconShareRedirectLink', + , +); + +export const IconShield = createIcon( + 'IconShield', + , +); + +export const IconSquareBehindSquare2_Copy = createIcon( + 'IconSquareBehindSquare2_Copy', + , +); + +export const IconSquareCircleTopRightFeeds = createIcon( + 'IconSquareCircleTopRightFeeds', + , +); + +export const IconStop = createIcon( + 'IconStop', + , +); + +export const IconTable = createIcon( + 'IconTable', + , +); + +export const IconTeam = createIcon( + 'IconTeam', + <> + + + + + + + + + , +); + +export const IconTennis = createIcon( + 'IconTennis', + , +); + +export const IconTextToImageURLEnrichment = createIcon( + 'IconTextToImageURLEnrichment', + <> + + + + + + + , +); + +export const IconThunder = createIcon( + 'IconThunder', + <> + + + + + + + + + , +); + +export const IconTrashBin = createIcon( + 'IconTrashBin', + , +); + +export const IconTrending4 = createIcon( + 'IconTrending4', + , +); + +export const IconTrophy = createIcon( + 'IconTrophy', + , +); + +export const IconUnlocked = createIcon( + 'IconUnlocked', + , +); + +export const IconUsers = createIcon( + 'IconUsers', + , +); + +export const IconVideo = createIcon( + 'IconVideo', + , +); + +export const IconVideoSolid = createIcon( + 'IconVideoSolid', + , +); + +export const IconVoiceAndVideo = createIcon( + 'IconVoiceAndVideo', + <> + + + + + + + + + , +); + +export const IconVoiceHigh = createIcon( + 'IconVoiceHigh', + , +); + +export const IconVolumeFull = createIcon( + 'IconVolumeFull', + , +); + +export const IconWebhook = createIcon( + 'IconWebhook', + , +); diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts index 831808aac..8b963e6e3 100644 --- a/src/components/Icons/index.ts +++ b/src/components/Icons/index.ts @@ -1,38 +1,3 @@ -export * from './IconArrowRotateClockwise'; -export * from './IconBin'; -export * from './IconCamera'; -export * from './IconChainLink'; -export * from './IconCheckmark'; -export * from './IconCheckmark2'; -export * from './IconChevronRight'; -export * from './IconCircleMinus'; -export * from './IconClose'; -export * from './IconCog'; -export * from './IconCommand'; -export * from './IconCross'; -export * from './IconDotGrid2x3'; -export * from './IconDoubleCheckmark'; -export * from './IconEmoji'; -export * from './IconExclamationCircle'; -export * from './IconExclamationTriangle'; -export * from './IconEyeOpen'; -export * from './IconFile'; -export * from './IconFlag'; +export { createIcon } from './createIcon'; +export * from './icons'; export * from './IconGiphy'; -export * from './IconLightning'; -export * from './IconLocationPin'; -export * from './IconMicrophone'; -export * from './IconMute'; -export * from './IconPaperclip'; -export * from './IconPaperPlane'; -export * from './IconPause'; -export * from './IconPerson'; -export * from './IconPersonAdd'; -export * from './IconPersonRemove'; -export * from './IconPlaySolid'; -export * from './IconPlus'; -export * from './IconPoll'; -export * from './IconSingleCheckmark'; -export * from './IconVideoCamera'; -export * from './IconVideoCameraOutline'; -export * from './IconVolumeFull'; diff --git a/src/components/Icons/styling/BaseIcon.scss b/src/components/Icons/styling/BaseIcon.scss deleted file mode 100644 index 370c57cfe..000000000 --- a/src/components/Icons/styling/BaseIcon.scss +++ /dev/null @@ -1,3 +0,0 @@ -.str-chat__icon { - flex-shrink: 0; -} diff --git a/src/components/Icons/styling/IconArrowRotateClockwise.scss b/src/components/Icons/styling/IconArrowRotateClockwise.scss deleted file mode 100644 index 132876bf6..000000000 --- a/src/components/Icons/styling/IconArrowRotateClockwise.scss +++ /dev/null @@ -1,14 +0,0 @@ -.str-chat { - .str-chat__icon--arrow-rotate-clockwise { - fill: none; - width: 16px; - height: 16px; - - path { - stroke: white; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 1.5; - } - } -} diff --git a/src/components/Icons/styling/IconBin.scss b/src/components/Icons/styling/IconBin.scss deleted file mode 100644 index 5bcb90b6c..000000000 --- a/src/components/Icons/styling/IconBin.scss +++ /dev/null @@ -1,14 +0,0 @@ -.str-chat { - .str-chat__icon--bin { - fill: none; - width: 16px; - height: 16px; - - path { - stroke: currentColor; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 1.5; - } - } -} diff --git a/src/components/Icons/styling/IconCamera.scss b/src/components/Icons/styling/IconCamera.scss deleted file mode 100644 index c73e6d665..000000000 --- a/src/components/Icons/styling/IconCamera.scss +++ /dev/null @@ -1,12 +0,0 @@ -.str-chat__icon--camera { - fill: none; - height: 12px; - width: 12px; - - path { - stroke: currentColor; - stroke-linecap: square; - stroke-linejoin: round; - stroke-width: 1.2; - } -} diff --git a/src/components/Icons/styling/IconChainLink.scss b/src/components/Icons/styling/IconChainLink.scss deleted file mode 100644 index 94ca64d37..000000000 --- a/src/components/Icons/styling/IconChainLink.scss +++ /dev/null @@ -1,17 +0,0 @@ -.str-chat__icon--chain-link { - fill: none; - height: 12px; - width: 12px; - - path { - stroke: currentColor; - stroke-linecap: round; - stroke-width: 1.2; - } - - #clip-path rect { - fill: var(--base-white); - height: 12px; - width: 12px; - } -} diff --git a/src/components/Icons/styling/IconCheckmark.scss b/src/components/Icons/styling/IconCheckmark.scss deleted file mode 100644 index 1473817ff..000000000 --- a/src/components/Icons/styling/IconCheckmark.scss +++ /dev/null @@ -1,14 +0,0 @@ -.str-chat { - .str-chat__icon--checkmark { - fill: none; - width: 16px; - height: 16px; - - path { - stroke: currentColor; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 1.5; - } - } -} diff --git a/src/components/Icons/styling/IconCheckmark2.scss b/src/components/Icons/styling/IconCheckmark2.scss deleted file mode 100644 index 410c32fda..000000000 --- a/src/components/Icons/styling/IconCheckmark2.scss +++ /dev/null @@ -1,9 +0,0 @@ -.str-chat__icon--checkmark2 { - fill: none; - height: 16px; - width: 16px; - - path { - fill: currentColor; - } -} diff --git a/src/components/Icons/styling/IconChevronRight.scss b/src/components/Icons/styling/IconChevronRight.scss deleted file mode 100644 index 658651617..000000000 --- a/src/components/Icons/styling/IconChevronRight.scss +++ /dev/null @@ -1,13 +0,0 @@ -.str-chat__icon--chevron-right { - fill: none; - height: 16px; - width: 16px; - - path { - fill: none; - stroke: currentColor; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 1.5; - } -} diff --git a/src/components/Icons/styling/IconCircleMinus.scss b/src/components/Icons/styling/IconCircleMinus.scss deleted file mode 100644 index 8a63dfb3c..000000000 --- a/src/components/Icons/styling/IconCircleMinus.scss +++ /dev/null @@ -1,9 +0,0 @@ -.str-chat__icon--circle-minus { - fill: none; - height: 16px; - width: 16px; - - path { - fill: currentColor; - } -} diff --git a/src/components/Icons/styling/IconClose.scss b/src/components/Icons/styling/IconClose.scss deleted file mode 100644 index 8be7b7251..000000000 --- a/src/components/Icons/styling/IconClose.scss +++ /dev/null @@ -1,13 +0,0 @@ -.str-chat { - .str-chat__icon--close { - fill: none; - width: 8px; - height: 8px; - - path { - stroke: currentColor; - stroke-linecap: round; - stroke-width: 1.5; - } - } -} diff --git a/src/components/Icons/styling/IconCog.scss b/src/components/Icons/styling/IconCog.scss deleted file mode 100644 index e093d8899..000000000 --- a/src/components/Icons/styling/IconCog.scss +++ /dev/null @@ -1,9 +0,0 @@ -.str-chat__icon--cog { - fill: none; - height: 16px; - width: 16px; - - path { - fill: currentColor; - } -} diff --git a/src/components/Icons/styling/IconCommand.scss b/src/components/Icons/styling/IconCommand.scss deleted file mode 100644 index 02ca257f0..000000000 --- a/src/components/Icons/styling/IconCommand.scss +++ /dev/null @@ -1,13 +0,0 @@ -.str-chat__icon--command { - fill: none; - height: 16px; - width: 16px; - - path { - fill: none; - stroke: currentColor; - stroke-linecap: square; - stroke-linejoin: round; - stroke-width: 1.5; - } -} diff --git a/src/components/Icons/styling/IconCross.scss b/src/components/Icons/styling/IconCross.scss deleted file mode 100644 index 8478cb360..000000000 --- a/src/components/Icons/styling/IconCross.scss +++ /dev/null @@ -1,11 +0,0 @@ -.str-chat__icon--cross { - fill: none; - height: 10px; - width: 10px; - - path { - stroke: currentColor; - stroke-linecap: round; - stroke-width: 1.5; - } -} diff --git a/src/components/Icons/styling/IconDotGrid2x3.scss b/src/components/Icons/styling/IconDotGrid2x3.scss deleted file mode 100644 index f54c20572..000000000 --- a/src/components/Icons/styling/IconDotGrid2x3.scss +++ /dev/null @@ -1,9 +0,0 @@ -.str-chat__icon--dot-grid-2x3 { - fill: none; - height: 16px; - width: 16px; - - path { - fill: currentColor; - } -} diff --git a/src/components/Icons/styling/IconDoubleCheckmark.scss b/src/components/Icons/styling/IconDoubleCheckmark.scss deleted file mode 100644 index a096747a8..000000000 --- a/src/components/Icons/styling/IconDoubleCheckmark.scss +++ /dev/null @@ -1,14 +0,0 @@ -.str-chat { - .str-chat__icon--double-checkmark { - fill: none; - height: 16px; - width: 16px; - - path { - fill: currentColor; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 1.5; - } - } -} diff --git a/src/components/Icons/styling/IconEmoji.scss b/src/components/Icons/styling/IconEmoji.scss deleted file mode 100644 index 8ac07e2fa..000000000 --- a/src/components/Icons/styling/IconEmoji.scss +++ /dev/null @@ -1,11 +0,0 @@ -.str-chat { - .str-chat__icon--emoji { - fill: none; - height: 16px; - width: 16px; - - path { - fill: currentColor; - } - } -} diff --git a/src/components/Icons/styling/IconExclamationCircle.scss b/src/components/Icons/styling/IconExclamationCircle.scss deleted file mode 100644 index bb6ec8836..000000000 --- a/src/components/Icons/styling/IconExclamationCircle.scss +++ /dev/null @@ -1,11 +0,0 @@ -.str-chat { - .str-chat__icon--exclamation-circle { - fill: none; - width: 14px; - height: 14px; - - path { - fill: currentColor; - } - } -} diff --git a/src/components/Icons/styling/IconExclamationTriangle.scss b/src/components/Icons/styling/IconExclamationTriangle.scss deleted file mode 100644 index 4e22a1add..000000000 --- a/src/components/Icons/styling/IconExclamationTriangle.scss +++ /dev/null @@ -1,11 +0,0 @@ -.str-chat { - .str-chat__icon--exclamation-triangle { - fill: none; - width: 16px; - height: 16px; - - path { - fill: currentColor; - } - } -} diff --git a/src/components/Icons/styling/IconEyeOpen.scss b/src/components/Icons/styling/IconEyeOpen.scss deleted file mode 100644 index b47672c18..000000000 --- a/src/components/Icons/styling/IconEyeOpen.scss +++ /dev/null @@ -1,9 +0,0 @@ -.str-chat__icon--eye-open { - fill: none; - height: 16px; - width: 16px; - - path { - fill: currentColor; - } -} diff --git a/src/components/Icons/styling/IconFile.scss b/src/components/Icons/styling/IconFile.scss deleted file mode 100644 index af8fdc507..000000000 --- a/src/components/Icons/styling/IconFile.scss +++ /dev/null @@ -1,11 +0,0 @@ -.str-chat__icon--file { - fill: none; - height: 12px; - width: 12px; - - path { - stroke: currentColor; - stroke-linejoin: round; - stroke-width: 1.2; - } -} diff --git a/src/components/Icons/styling/IconFlag.scss b/src/components/Icons/styling/IconFlag.scss deleted file mode 100644 index eef0bf87c..000000000 --- a/src/components/Icons/styling/IconFlag.scss +++ /dev/null @@ -1,12 +0,0 @@ -.str-chat__icon--flag { - fill: none; - width: 16px; - height: 16px; - - path { - stroke: currentColor; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 1.2; - } -} diff --git a/src/components/Icons/styling/IconGiphy.scss b/src/components/Icons/styling/IconGiphy.scss deleted file mode 100644 index 1827cbe56..000000000 --- a/src/components/Icons/styling/IconGiphy.scss +++ /dev/null @@ -1,5 +0,0 @@ -.str-chat__icon--giphy { - fill: none; - width: 16px; - height: 16px; -} diff --git a/src/components/Icons/styling/IconLightning.scss b/src/components/Icons/styling/IconLightning.scss deleted file mode 100644 index 44208cb3a..000000000 --- a/src/components/Icons/styling/IconLightning.scss +++ /dev/null @@ -1,9 +0,0 @@ -.str-chat__icon--lightning { - fill: none; - width: 9px; - height: 12px; - - path { - fill: currentColor; - } -} diff --git a/src/components/Icons/styling/IconLocationPin.scss b/src/components/Icons/styling/IconLocationPin.scss deleted file mode 100644 index 17e584fef..000000000 --- a/src/components/Icons/styling/IconLocationPin.scss +++ /dev/null @@ -1,11 +0,0 @@ -.str-chat__icon--location-pin { - fill: none; - height: 12px; - width: 12px; - - path { - stroke: currentColor; - stroke-linejoin: round; - stroke-width: 1.2; - } -} diff --git a/src/components/Icons/styling/IconMicrophone.scss b/src/components/Icons/styling/IconMicrophone.scss deleted file mode 100644 index ba3181b31..000000000 --- a/src/components/Icons/styling/IconMicrophone.scss +++ /dev/null @@ -1,9 +0,0 @@ -.str-chat { - .str-chat__icon--microphone { - fill: none; - stroke: currentColor; - stroke-width: 1.5; - stroke-linecap: round; - stroke-linejoin: round; - } -} diff --git a/src/components/Icons/styling/IconMute.scss b/src/components/Icons/styling/IconMute.scss deleted file mode 100644 index f1118c59b..000000000 --- a/src/components/Icons/styling/IconMute.scss +++ /dev/null @@ -1,8 +0,0 @@ -.str-chat__icon--mute { - fill: currentColor; - width: 16px; - height: 16px; - - path { - } -} diff --git a/src/components/Icons/styling/IconPaperPlane.scss b/src/components/Icons/styling/IconPaperPlane.scss deleted file mode 100644 index cb1cf6386..000000000 --- a/src/components/Icons/styling/IconPaperPlane.scss +++ /dev/null @@ -1,11 +0,0 @@ -.str-chat { - .str-chat__icon--paper-plane { - height: 16px; - width: 16px; - fill: none; - stroke-width: 1.5; - stroke: currentColor; - stroke-linecap: round; - stroke-linejoin: round; - } -} diff --git a/src/components/Icons/styling/IconPaperclip.scss b/src/components/Icons/styling/IconPaperclip.scss deleted file mode 100644 index aa5399001..000000000 --- a/src/components/Icons/styling/IconPaperclip.scss +++ /dev/null @@ -1,13 +0,0 @@ -.str-chat { - .str-chat__icon--paperclip { - fill: none; - width: 16px; - height: 16px; - - path { - stroke: currentColor; - stroke-linecap: round; - stroke-width: 1.2; - } - } -} diff --git a/src/components/Icons/styling/IconPause.scss b/src/components/Icons/styling/IconPause.scss deleted file mode 100644 index 39150e666..000000000 --- a/src/components/Icons/styling/IconPause.scss +++ /dev/null @@ -1,11 +0,0 @@ -.str-chat { - .str-chat__icon--pause { - fill: none; - height: 20px; - width: 20px; - - path { - fill: var(--text-primary); - } - } -} diff --git a/src/components/Icons/styling/IconPerson.scss b/src/components/Icons/styling/IconPerson.scss deleted file mode 100644 index 4a068604f..000000000 --- a/src/components/Icons/styling/IconPerson.scss +++ /dev/null @@ -1,9 +0,0 @@ -.str-chat__icon--person { - width: 16px; - height: 16px; - stroke-width: 1.5; - stroke: currentColor; - stroke-linecap: round; - stroke-linejoin: round; - fill: none; -} diff --git a/src/components/Icons/styling/IconPersonAdd.scss b/src/components/Icons/styling/IconPersonAdd.scss deleted file mode 100644 index acf8afa80..000000000 --- a/src/components/Icons/styling/IconPersonAdd.scss +++ /dev/null @@ -1,12 +0,0 @@ -.str-chat__icon--person-add { - fill: none; - width: 16px; - height: 16px; - - path { - stroke: currentColor; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 1.2; - } -} diff --git a/src/components/Icons/styling/IconPersonRemove.scss b/src/components/Icons/styling/IconPersonRemove.scss deleted file mode 100644 index bfb3ce377..000000000 --- a/src/components/Icons/styling/IconPersonRemove.scss +++ /dev/null @@ -1,12 +0,0 @@ -.str-chat__icon--person-remove { - fill: none; - width: 16px; - height: 16px; - - path { - stroke: currentColor; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 1.2; - } -} diff --git a/src/components/Icons/styling/IconPlaySolid.scss b/src/components/Icons/styling/IconPlaySolid.scss deleted file mode 100644 index 7cc2b2e35..000000000 --- a/src/components/Icons/styling/IconPlaySolid.scss +++ /dev/null @@ -1,11 +0,0 @@ -.str-chat { - .str-chat__icon--play-solid { - fill: none; - height: 20px; - width: 20px; - - path { - fill: var(--text-primary); - } - } -} diff --git a/src/components/Icons/styling/IconPlus.scss b/src/components/Icons/styling/IconPlus.scss deleted file mode 100644 index 09aa5ae4c..000000000 --- a/src/components/Icons/styling/IconPlus.scss +++ /dev/null @@ -1,8 +0,0 @@ -.str-chat { - .str-chat__icon--plus { - stroke-width: 1.5; - stroke: currentColor; - stroke-linecap: round; - stroke-linejoin: round; - } -} diff --git a/src/components/Icons/styling/IconPoll.scss b/src/components/Icons/styling/IconPoll.scss deleted file mode 100644 index 8baed7f34..000000000 --- a/src/components/Icons/styling/IconPoll.scss +++ /dev/null @@ -1,13 +0,0 @@ -.str-chat__icon--poll { - fill: none; - height: 10px; - width: 10px; - - path { - fill: none; - stroke: currentColor; - stroke-linecap: square; - stroke-linejoin: round; - stroke-width: 1.2; - } -} diff --git a/src/components/Icons/styling/IconSingleCheckmark.scss b/src/components/Icons/styling/IconSingleCheckmark.scss deleted file mode 100644 index 0c38bbb24..000000000 --- a/src/components/Icons/styling/IconSingleCheckmark.scss +++ /dev/null @@ -1,11 +0,0 @@ -.str-chat { - .str-chat__icon--single-checkmark { - fill: none; - height: 16px; - width: 16px; - - path { - fill: currentColor; - } - } -} diff --git a/src/components/Icons/styling/IconVideoCameraOutline.scss b/src/components/Icons/styling/IconVideoCameraOutline.scss deleted file mode 100644 index 545424969..000000000 --- a/src/components/Icons/styling/IconVideoCameraOutline.scss +++ /dev/null @@ -1,11 +0,0 @@ -.str-chat__icon--video-camera-outline { - fill: none; - height: 12px; - width: 12px; - - path { - stroke: currentColor; - stroke-linejoin: round; - stroke-width: 1.2; - } -} diff --git a/src/components/Icons/styling/IconVolumeFull.scss b/src/components/Icons/styling/IconVolumeFull.scss deleted file mode 100644 index 1e8cf31b2..000000000 --- a/src/components/Icons/styling/IconVolumeFull.scss +++ /dev/null @@ -1,12 +0,0 @@ -.str-chat__icon--volume-full { - fill: none; - width: 16px; - height: 16px; - - path { - stroke: currentColor; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 1.2; - } -} diff --git a/src/components/Icons/styling/Icons.scss b/src/components/Icons/styling/Icons.scss new file mode 100644 index 000000000..b28f54b48 --- /dev/null +++ b/src/components/Icons/styling/Icons.scss @@ -0,0 +1,6 @@ +.str-chat__icon { + flex-shrink: 0; + width: 1em; + height: 1em; + fill: currentColor; +} \ No newline at end of file diff --git a/src/components/Icons/styling/index.scss b/src/components/Icons/styling/index.scss index 3030a4554..4089cfd73 100644 --- a/src/components/Icons/styling/index.scss +++ b/src/components/Icons/styling/index.scss @@ -1,38 +1 @@ -@use 'BaseIcon'; -@use 'IconArrowRotateClockwise'; -@use 'IconBin'; -@use 'IconCamera'; -@use 'IconChainLink'; -@use 'IconCheckmark'; -@use 'IconCheckmark2'; -@use 'IconChevronRight'; -@use 'IconCircleMinus'; -@use 'IconClose'; -@use 'IconCog'; -@use 'IconCommand'; -@use 'IconCross'; -@use 'IconDotGrid2x3'; -@use 'IconDoubleCheckmark'; -@use 'IconEmoji'; -@use 'IconExclamationCircle'; -@use 'IconExclamationTriangle'; -@use 'IconEyeOpen'; -@use 'IconFile'; -@use 'IconFlag'; -@use 'IconGiphy'; -@use 'IconLightning'; -@use 'IconLocationPin'; -@use 'IconMicrophone'; -@use 'IconMute'; -@use 'IconPaperclip'; -@use 'IconPaperPlane'; -@use 'IconPause'; -@use 'IconPerson'; -@use 'IconPersonAdd'; -@use 'IconPersonRemove'; -@use 'IconPlaySolid'; -@use 'IconPlus'; -@use 'IconPoll'; -@use 'IconSingleCheckmark'; -@use 'IconVideoCameraOutline'; -@use 'IconVolumeFull'; +@use 'Icons'; \ No newline at end of file diff --git a/src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx b/src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx index 74e5e3cff..c2ccc4d71 100644 --- a/src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx +++ b/src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx @@ -1,5 +1,5 @@ import { CheckSignIcon, LoadingIndicatorIcon } from '../../MessageInput'; -import { IconBin, IconMicrophone, IconPause } from '../../Icons'; +import { IconMicrophone, IconPause, IconTrashBin } from '../../Icons'; import React from 'react'; import { useMessageInputContext } from '../../../context'; import { isRecording } from './recordingStateIdentity'; @@ -52,7 +52,7 @@ export const AudioRecorderRecordingControls = () => { disabled={isUploadingFile} onClick={recorder.cancel} > - + )} diff --git a/src/components/Message/MessageStatus.tsx b/src/components/Message/MessageStatus.tsx index a529ecdd2..3bf8d381d 100644 --- a/src/components/Message/MessageStatus.tsx +++ b/src/components/Message/MessageStatus.tsx @@ -9,7 +9,7 @@ import { useEnterLeaveHandlers } from '../Tooltip/hooks'; import { useChatContext } from '../../context/ChatContext'; import { useMessageContext } from '../../context/MessageContext'; import { useTranslationContext } from '../../context/TranslationContext'; -import { IconDoubleCheckmark, IconSingleCheckmark } from '../Icons'; +import { IconCheckmark1Small, IconClock, IconDoubleCheckmark1Small } from '../Icons'; export type MessageStatusProps = { /* Custom component to render when message is considered delivered, not read. The default UI renders MessageDeliveredIcon and a tooltip with string 'Delivered'. */ @@ -102,7 +102,7 @@ const UnMemoizedMessageStatus = (props: MessageStatusProps) => { referenceElement={referenceElement} visible={tooltipVisible} > - {t('Sending...')} + @@ -120,7 +120,7 @@ const UnMemoizedMessageStatus = (props: MessageStatusProps) => { > {t('Sent')} - + ))} @@ -136,7 +136,7 @@ const UnMemoizedMessageStatus = (props: MessageStatusProps) => { > {t('Delivered')} - + ))} @@ -153,7 +153,7 @@ const UnMemoizedMessageStatus = (props: MessageStatusProps) => { {getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)} - + {readersWithoutOwnUser.length > 1 && ( { return ( - + {t('Remind Me')} diff --git a/src/components/MessageInput/AttachmentPreviewList/GeolocationPreview.tsx b/src/components/MessageInput/AttachmentPreviewList/GeolocationPreview.tsx index b91b839aa..c2db17842 100644 --- a/src/components/MessageInput/AttachmentPreviewList/GeolocationPreview.tsx +++ b/src/components/MessageInput/AttachmentPreviewList/GeolocationPreview.tsx @@ -3,7 +3,7 @@ import type { ComponentType } from 'react'; import React from 'react'; import { useTranslationContext } from '../../../context'; import { GeolocationIcon } from '../../Attachment/icons'; -import { IconClose } from '../../Icons'; +import { IconCrossMedium } from '../../Icons'; type GeolocationPreviewImageProps = { location: StaticLocationPreview | LiveLocationPreview; @@ -38,7 +38,7 @@ export const GeolocationPreview = ({ onClick={remove} type='button' > - + )} diff --git a/src/components/MessageInput/AttachmentPreviewList/MediaAttachmentPreview.tsx b/src/components/MessageInput/AttachmentPreviewList/MediaAttachmentPreview.tsx index ac102d29f..4ace7b6f4 100644 --- a/src/components/MessageInput/AttachmentPreviewList/MediaAttachmentPreview.tsx +++ b/src/components/MessageInput/AttachmentPreviewList/MediaAttachmentPreview.tsx @@ -18,7 +18,7 @@ import { LoadingIndicatorIcon } from '../icons'; import { IconArrowRotateClockwise, IconExclamationCircle, - IconVideoCamera, + IconVideoSolid, } from '../../Icons'; import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton'; import { Button } from '../../Button'; @@ -100,7 +100,7 @@ export const MediaAttachmentPreview = ({ !hasUploadError && uploadState !== 'uploading' && (
- + {attachment.duration &&
{attachment.duration}
}
)} diff --git a/src/components/MessageInput/AttachmentSelector/AttachmentSelector.tsx b/src/components/MessageInput/AttachmentSelector/AttachmentSelector.tsx index 1b9bab8d8..1b76095b7 100644 --- a/src/components/MessageInput/AttachmentSelector/AttachmentSelector.tsx +++ b/src/components/MessageInput/AttachmentSelector/AttachmentSelector.tsx @@ -39,11 +39,11 @@ import { useStableId } from '../../UtilityComponents/useStableId'; import clsx from 'clsx'; import { Button, type ButtonProps } from '../../Button'; import { - IconCommand, - IconLocationPin, + IconChart5, + IconMapPin, IconPaperclip, - IconPlus, - IconPoll, + IconPlusLarge, + IconRunShortcut, } from '../../Icons'; import { useIsCooldownActive } from '../hooks/useIsCooldownActive'; import { @@ -59,7 +59,7 @@ const AttachmentSelectorMenuInitButtonIcon = () => { return ; } - return ; + return ; }; export const AttachmentSelectorButton = forwardRef( @@ -147,7 +147,7 @@ export const DefaultAttachmentSelectorComponents = { { if (!hasSubmenu) return; openSubmenu({ @@ -183,7 +183,7 @@ export const DefaultAttachmentSelectorComponents = { return ( { openModalForAction('addLocation'); closeMenu(); @@ -198,7 +198,7 @@ export const DefaultAttachmentSelectorComponents = { return ( { openModalForAction('createPoll'); closeMenu(); diff --git a/src/components/MessageInput/AttachmentSelector/CommandsMenu.tsx b/src/components/MessageInput/AttachmentSelector/CommandsMenu.tsx index 47de9bec4..df0ad2cb7 100644 --- a/src/components/MessageInput/AttachmentSelector/CommandsMenu.tsx +++ b/src/components/MessageInput/AttachmentSelector/CommandsMenu.tsx @@ -9,22 +9,22 @@ import { useContextMenuContext, } from '../../Dialog'; import { - IconChevronRight, - IconFlag, + IconChevronLeft, + IconFlag2, IconGiphy, IconMute, - IconPersonAdd, - IconPersonRemove, + IconPeopleAdd, + IconPeopleRemove, IconVolumeFull, } from '../../Icons'; import clsx from 'clsx'; const icons: Record = { - ban: IconPersonRemove, - flag: IconFlag, + ban: IconPeopleRemove, + flag: IconFlag2, giphy: IconGiphy, mute: IconMute, - unban: IconPersonAdd, + unban: IconPeopleAdd, unmute: IconVolumeFull, }; @@ -36,7 +36,7 @@ export const CommandsSubmenuHeader = () => { return ( - + {t('Instant commands')} diff --git a/src/components/MessageInput/CommandChip.tsx b/src/components/MessageInput/CommandChip.tsx index 5991576b8..15cfbd872 100644 --- a/src/components/MessageInput/CommandChip.tsx +++ b/src/components/MessageInput/CommandChip.tsx @@ -1,7 +1,7 @@ import { useMessageComposer } from './hooks'; import { useStateStore } from '../../store'; import type { TextComposerState } from 'stream-chat'; -import { IconCross, IconLightning } from '../Icons'; +import { IconCrossMedium, IconThunder } from '../Icons'; import { useMessageInputContext } from '../../context'; const textComposerStateSelector = ({ command }: TextComposerState) => ({ command }); @@ -14,7 +14,7 @@ export const CommandChip = () => { return (
- + {command.name}
); diff --git a/src/components/MessageInput/MessageComposerActions.tsx b/src/components/MessageInput/MessageComposerActions.tsx index a1450dd7b..7eedfc269 100644 --- a/src/components/MessageInput/MessageComposerActions.tsx +++ b/src/components/MessageInput/MessageComposerActions.tsx @@ -13,7 +13,7 @@ import { AudioRecordingButtonWithNotification } from '../MediaRecorder/AudioReco import { useIsCooldownActive } from './hooks/useIsCooldownActive'; import type { MessageComposerState, TextComposerState } from 'stream-chat'; import { useStateStore } from '../../store'; -import { IconCheckmark, IconPaperPlane } from '../Icons'; +import { IconCheckmark2, IconPaperPlane } from '../Icons'; const messageComposerStateSelector = ({ editedMessage }: MessageComposerState) => ({ editedMessage, @@ -71,7 +71,7 @@ export const MessageComposerActions = () => { ) : ( - {editedMessage || command ? : } + {editedMessage || command ? : } ); diff --git a/src/components/MessageInput/QuotedMessagePreview.tsx b/src/components/MessageInput/QuotedMessagePreview.tsx index 05e321a9d..74e528068 100644 --- a/src/components/MessageInput/QuotedMessagePreview.tsx +++ b/src/components/MessageInput/QuotedMessagePreview.tsx @@ -31,14 +31,14 @@ import { import type { MessageContextValue } from '../../context'; import { RemoveAttachmentPreviewButton } from './RemoveAttachmentPreviewButton'; import { - IconCamera, IconChainLink, - IconFile, - IconLocationPin, + IconChart5, + IconFileBend, + IconMapPin, IconMicrophone, IconPlaySolid, - IconPoll, - IconVideoCameraOutline, + IconVideo, + IconVideoSolid, } from '../Icons'; import clsx from 'clsx'; import { BaseImage } from '../Gallery'; @@ -165,10 +165,10 @@ const getAttachmentIconWithType = ( }; if (!groupedAttachments.total) return result; if (groupedAttachments.polls.length > 0) - return { ...result, Icon: IconPoll, previewType: 'poll' }; + return { ...result, Icon: IconChart5, previewType: 'poll' }; if (groupedAttachments.locations.length > 0) // todo: we do not generate the location preview image - return { ...result, Icon: IconLocationPin, previewType: 'location' }; + return { ...result, Icon: IconMapPin, previewType: 'location' }; if ( groupedAttachments.documents.length === groupedAttachments.total && groupedAttachments.documents.length === 1 @@ -176,7 +176,7 @@ const getAttachmentIconWithType = ( const fileAttachment = groupedAttachments.documents[0] as Attachment; return { ...result, - Icon: IconFile, + Icon: IconFileBend, PreviewImage: ( ), @@ -203,7 +203,7 @@ const getAttachmentIconWithType = ( const videoAttachment = groupedAttachments.videos[0]; return { ...result, - Icon: IconVideoCameraOutline, + Icon: IconVideo, PreviewImage: ( <> - + ); }; diff --git a/src/components/MessageInput/SendButton.tsx b/src/components/MessageInput/SendButton.tsx index 6ef044124..2d1eff59c 100644 --- a/src/components/MessageInput/SendButton.tsx +++ b/src/components/MessageInput/SendButton.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { useMessageComposerHasSendableData } from './hooks'; import type { UpdatedMessage } from 'stream-chat'; import { useTranslationContext } from '../../context'; -import { IconPaperPlane } from '../Icons/IconPaperPlane'; +import { IconPaperPlane } from '../Icons'; import { Button } from '../Button'; import clsx from 'clsx'; diff --git a/src/components/MessageInput/styling/AttachmentPreview.scss b/src/components/MessageInput/styling/AttachmentPreview.scss index 17080e5b7..821cb058d 100644 --- a/src/components/MessageInput/styling/AttachmentPreview.scss +++ b/src/components/MessageInput/styling/AttachmentPreview.scss @@ -111,6 +111,7 @@ .str-chat__message_attachment__playback-rate-button { @include utils.button-reset; + text-transform: none; display: flex; min-width: 40px; min-height: 24px; diff --git a/src/components/MessageInput/styling/AttachmentSelector.scss b/src/components/MessageInput/styling/AttachmentSelector.scss index a335cf707..f0eb154b9 100644 --- a/src/components/MessageInput/styling/AttachmentSelector.scss +++ b/src/components/MessageInput/styling/AttachmentSelector.scss @@ -10,6 +10,7 @@ .str-chat__attachment-selector { .str-chat__attachment-selector__menu-button { .str-chat__attachment-selector__menu-button__icon { + height: var(--icon-size-md); width: var(--icon-size-md); color: var(--str-chat__attachment-selector-button-icon-color); } diff --git a/src/components/Modal/CloseButtonOnModalOverlay.tsx b/src/components/Modal/CloseButtonOnModalOverlay.tsx index f7bc068f4..d7671016d 100644 --- a/src/components/Modal/CloseButtonOnModalOverlay.tsx +++ b/src/components/Modal/CloseButtonOnModalOverlay.tsx @@ -1,5 +1,5 @@ import { Button } from '../Button'; -import { IconCross } from '../Icons'; +import { IconCrossMedium } from '../Icons'; import type { ComponentProps } from 'react'; import clsx from 'clsx'; @@ -17,6 +17,6 @@ export const CloseButtonOnModalOverlay = ({ className, )} > - {children ?? } + {children ?? } ); diff --git a/src/components/Modal/ModalHeader.tsx b/src/components/Modal/ModalHeader.tsx index ec4d4cfe9..b0a094856 100644 --- a/src/components/Modal/ModalHeader.tsx +++ b/src/components/Modal/ModalHeader.tsx @@ -1,7 +1,7 @@ import React from 'react'; import clsx from 'clsx'; import { Button } from '../Button'; -import { IconCross } from '../Icons'; +import { IconCrossMedium } from '../Icons'; export type ModalHeaderProps = { title: string; @@ -27,7 +27,7 @@ export const ModalHeader = ({ className, close, goBack, title }: ModalHeaderProp )} onClick={close} > - + )}
diff --git a/src/components/Poll/PollActions/PollAction.tsx b/src/components/Poll/PollActions/PollAction.tsx index 290415fd4..e84a5096e 100644 --- a/src/components/Poll/PollActions/PollAction.tsx +++ b/src/components/Poll/PollActions/PollAction.tsx @@ -1,6 +1,6 @@ import type { PropsWithChildren } from 'react'; import React from 'react'; -import { Modal as DefaultModal } from '../../Modal'; +import { GlobalModal } from '../../Modal'; import { useComponentContext } from '../../../context'; import { Button } from '../../Button'; import clsx from 'clsx'; @@ -27,7 +27,7 @@ export const PollAction = ({ modalIsOpen, openModal, }: PropsWithChildren) => { - const { Modal = DefaultModal } = useComponentContext(); + const { Modal = GlobalModal } = useComponentContext(); return ( <> ); diff --git a/src/plugins/Emojis/EmojiPicker.tsx b/src/plugins/Emojis/EmojiPicker.tsx index fc2ef66d9..3af1815c4 100644 --- a/src/plugins/Emojis/EmojiPicker.tsx +++ b/src/plugins/Emojis/EmojiPicker.tsx @@ -4,7 +4,7 @@ import Picker from '@emoji-mart/react'; import { useMessageInputContext, useTranslationContext } from '../../context'; import { Button, - IconEmoji, + IconEmojiSmile, type PopperLikePlacement, useMessageComposer, } from '../../components'; @@ -70,7 +70,7 @@ export const EmojiPicker = (props: EmojiPickerProps) => { const { buttonClassName, pickerContainerClassName, wrapperClassName } = classNames; - const { ButtonIconComponent = IconEmoji } = props; + const { ButtonIconComponent = IconEmojiSmile } = props; useEffect(() => { if (!popperElement || !referenceElement) return;