feat: import all the icons that belong to Stream design system

examples/vite/src/AppSettings/AppSettings.tsx

@@ -2,16 +2,16 @@ import {
   Button,
   ChatViewSelectorButton,
   GlobalModal,
-  IconCog,
-  IconEmoji,
+  IconEmojiSmile,
+  IconSettingsGear2,
 } from 'stream-chat-react';
 import { type ComponentType, useState } from 'react';
 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 (
     <div className='app__settings-group'>
       <ChatViewSelectorButton
-        Icon={IconCog}
+        Icon={IconSettingsGear2}
         onClick={() => setOpen(true)}
         text='Settings'
       />
       <GlobalModal open={open} onClose={() => setOpen(false)}>
         <div className='app__settings-modal'>
           <header className='app__settings-modal__header'>
-            <IconCog />
+            <IconSettingsGear2 />
             Settings
           </header>
           <div className='app__settings-modal__body'>

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;

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}
             </div>
           )}
-          {!sizeAwareInitials.length && <IconPerson />}
+          {!sizeAwareInitials.length && <IconPeople />}
         </>
       )}
     </div>

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}
     >
-      <IconCross />
+      <IconCrossMedium />
     </Button>
   </div>
 );

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 ? (
           <ContextMenuHeader>
             <ContextMenuBackButton onClick={returnToParentMenu}>
-              <IconChevronRight />
+              <IconChevronLeft />
               <span>{backLabel}</span>
             </ContextMenuBackButton>
           </ContextMenuHeader>

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<HTMLInputElement, NumericInputProps>(
             disabled={disabled || atMax}
             onClick={handleIncrement}
           >
-            <IconPlus className='str-chat__form-numeric-input__stepper-icon' />
+            <IconPlusSmall className='str-chat__form-numeric-input__stepper-icon' />
           </Button>
         </div>
       </div>

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}
         >
-          <IconChevronRight />
+          <IconChevronLeft />
         </NavButton>
         <div
           className='str-chat__gallery__slide-container'

src/components/Gallery/styling/Gallery.scss

@@ -129,10 +129,6 @@
 
   .str-chat__gallery__nav-button--prev {
     left: var(--spacing-sm);
-
-    svg {
-      transform: rotate(180deg);
-    }
   }
 
   .str-chat__gallery__nav-button--next {

src/components/Icons/BaseIcon.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 
 export const BaseIcon = ({ className, ...props }: ComponentProps<'svg'>) => (
   <svg
+    viewBox='0 0 16 16'
     xmlns='http://www.w3.org/2000/svg'
     {...props}
     className={clsx('str-chat__icon', className)}