fix(icons): Replace with RH Ui icons

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/explore-pipeline-quickstart.ts

@@ -1,5 +1,3 @@
-import userAvatar from './user_avatar.svg';
-
 export const explorePipelinesQuickStart = {
   apiVersion: 'console.openshift.io/v1',
   kind: 'QuickStarts',
@@ -10,7 +8,6 @@ export const explorePipelinesQuickStart = {
     version: 4.7,
     displayName: `Installing the Pipelines Operator`,
     durationMinutes: 10,
-    icon: userAvatar,
     description: `Install the OpenShift® Pipelines Operator to build Pipelines using Tekton.`,
     prerequisites: [''],
     introduction: `OpenShift® Pipelines is a cloud-native, continuous integration and continuous delivery (CI/CD) solution based on Kubernetes resources. It uses Tekton building blocks to automate deployments across multiple Kubernetes distributions by abstracting away the underlying implementation details.

packages/module/src/FileDetailsLabel/FileDetailsLabel.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 import { Button, Label, LabelProps } from '@patternfly/react-core';
 import FileDetails from '../FileDetails';
 import { Spinner } from '@patternfly/react-core';
-import { TimesIcon } from '@patternfly/react-icons';
+import { RhMicronsCloseIcon } from '@patternfly/react-icons';
 
 export interface FileDetailsLabelProps extends Omit<LabelProps, 'onClose' | 'onClick'> {
   /** Name of file, including extension */
@@ -40,7 +40,7 @@ export const FileDetailsLabel = ({
   spinnerTestId,
   fileSize,
   hasTruncation = true,
-  closeButtonIcon = <TimesIcon />,
+  closeButtonIcon = <RhMicronsCloseIcon />,
   ...props
 }: PropsWithChildren<FileDetailsLabelProps>) => {
   const handleClose = (event) => {

packages/module/src/ImagePreview/ImagePreview.tsx

@@ -20,7 +20,7 @@ import {
 import { ChatbotDisplayMode } from '../Chatbot';
 import ChatbotModal, { ChatbotModalProps } from '../ChatbotModal';
 import FileDetailsLabel, { FileDetailsLabelProps } from '../FileDetailsLabel';
-import { TrashIcon } from '@patternfly/react-icons';
+import { RhUiTrashFillIcon } from '@patternfly/react-icons';
 
 export interface ImagePreviewProps extends Omit<ChatbotModalProps, 'children'> {
   /** Class applied to modal */
@@ -121,7 +121,11 @@ const ImagePreview: FunctionComponent<ImagePreviewProps> = ({
                 fileSize={images[page - 1].fileSize}
                 hasTruncation={false}
                 onClose={onCloseFileDetailsLabel}
-                closeButtonIcon={<TrashIcon />}
+                closeButtonIcon={
+                  <Icon size="md">
+                    <RhUiTrashFillIcon />
+                  </Icon>
+                }
                 {...fileDetailsLabelProps}
               />
             </StackItem>

packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -17,9 +17,8 @@ import {
   getUniqueId
 } from '@patternfly/react-core';
 
-import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { css } from '@patternfly/react-styles';
-import { RhUiCopyFillIcon } from '@patternfly/react-icons';
+import { RhMicronsCheckmarkIcon, RhUiCopyFillIcon } from '@patternfly/react-icons';
 
 export interface CodeBlockMessageProps {
   /** Content rendered in code block */
@@ -142,7 +141,7 @@ const CodeBlockMessage = ({
           className="pf-chatbot__button--copy"
           onClick={(event) => handleCopy(event, children)}
         >
-          {copied ? <CheckIcon /> : <RhUiCopyFillIcon />}
+          {copied ? <RhMicronsCheckmarkIcon /> : <RhUiCopyFillIcon />}
         </Button>
         <Tooltip id={tooltipID} content="Copy" position="top" triggerRef={buttonRef} />
       </CodeBlockAction>

packages/module/src/Message/Message.test.tsx

@@ -26,7 +26,12 @@ jest.mock('@patternfly/react-icons', () => ({
   RhUiExportFillIcon: () => <div>RhUiExportFillIcon</div>,
   RhMicronsInformationFillIcon: () => <div>RhMicronsInformationFillIcon</div>,
   RhUiBackwardsIcon: () => <div>RhUiBackwardsIcon</div>,
-  RhMicronsExternalLinkIcon: () => <div>RhMicronsExternalLinkIcon</div>
+  RhMicronsExternalLinkIcon: () => <div>RhMicronsExternalLinkIcon</div>,
+  RhMicronsCheckmarkIcon: () => <div>RhMicronsCheckmarkIcon</div>,
+  RhMicronsCloseIcon: () => <div>RhMicronsCloseIcon</div>,
+  RhUiBookmarkIcon: () => <div>RhUiBookmarkIcon</div>,
+  RhUiClockIcon: () => <div>RhUiClockIcon</div>,
+  RhUiRocketFillIcon: () => <div>RhUiRocketFillIcon</div>
 }));
 
 const ALL_ACTIONS = [

packages/module/src/Message/QuickResponse/QuickResponse.tsx

@@ -1,7 +1,7 @@
 import type { FunctionComponent } from 'react';
 import { useState } from 'react';
 import { Label, LabelGroup, LabelGroupProps, LabelProps } from '@patternfly/react-core';
-import { CheckIcon } from '@patternfly/react-icons';
+import { RhMicronsCheckmarkIcon } from '@patternfly/react-icons';
 import { css } from '@patternfly/react-styles';
 
 export interface QuickResponse extends Omit<LabelProps, 'children'> {
@@ -42,7 +42,7 @@ export const QuickResponse: FunctionComponent<QuickResponseProps> = ({
       {quickResponses.map(({ id, onClick, content, className, ...props }: QuickResponse) => (
         <Label
           variant={id === selectedQuickResponse ? undefined : 'outline'}
-          icon={id === selectedQuickResponse ? <CheckIcon /> : undefined}
+          icon={id === selectedQuickResponse ? <RhMicronsCheckmarkIcon /> : undefined}
           color="blue"
           key={id}
           onClick={() => handleQuickResponseClick(id, onClick)}

packages/module/src/Message/QuickStarts/QuickStartTile.tsx

@@ -1,6 +1,4 @@
 import type { FC, ReactNode } from 'react';
-import RocketIcon from '@patternfly/react-icons/dist/js/icons/rocket-icon';
-import OutlinedBookmarkIcon from '@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon';
 import {
   Card,
   CardBody,
@@ -14,11 +12,11 @@ import {
   Label,
   pluralize
 } from '@patternfly/react-core';
-import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-clock-icon';
 import QuickStartTileHeader from './QuickStartTileHeader';
 import QuickStartTileDescription from './QuickStartTileDescription';
 import { QuickStart, QuickstartAction } from './types';
 import FallbackImg from './FallbackImg';
+import { RhUiBookmarkIcon, RhUiClockIcon, RhUiRocketFillIcon } from '@patternfly/react-icons';
 
 export const camelize = (str: string) =>
   str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
@@ -77,7 +75,12 @@ export const QuickStartTile: FC<QuickStartTileProps> = ({
   } else {
     quickStartIcon = (
       <Icon size="2xl">
-        <FallbackImg src={icon as string} alt="" className="pfext-catalog-item-icon__img" fallback={<RocketIcon />} />
+        <FallbackImg
+          src={icon as string}
+          alt=""
+          className="pfext-catalog-item-icon__img"
+          fallback={<RhUiRocketFillIcon />}
+        />
       </Icon>
     );
   }
@@ -91,7 +94,7 @@ export const QuickStartTile: FC<QuickStartTileProps> = ({
     onClick && onClick();
   };
 
-  const ActionIcon = action?.icon || OutlinedBookmarkIcon;
+  const ActionIcon = action?.icon || RhUiBookmarkIcon;
   const additionalAction = action ? (
     <Button
       aria-label={action['aria-label']}
@@ -125,7 +128,7 @@ export const QuickStartTile: FC<QuickStartTileProps> = ({
           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
             {type && <Label color={type.color}>{type.text}</Label>}
             {durationMinutes && (
-              <Label variant="outline" data-test="duration" icon={<OutlinedClockIcon />}>
+              <Label variant="outline" data-test="duration" icon={<RhUiClockIcon />}>
                 {pluralize(durationMinutes, minuteWord, minuteWordPlural)}
               </Label>
             )}

packages/module/src/MessageBar/AttachButton.tsx

@@ -8,7 +8,7 @@ import { forwardRef } from 'react';
 // Import PatternFly components
 import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection, useDropzone } from 'react-dropzone';
-import { PaperclipIcon } from '@patternfly/react-icons/dist/esm/icons/paperclip-icon';
+import { RhUiPaperClipIcon } from '@patternfly/react-icons';
 
 export interface AttachButtonProps extends ButtonProps {
   /** Callback for when button is clicked */
@@ -74,7 +74,7 @@ const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
   onAttachRejected,
   validator,
   dropzoneProps,
-  icon = <PaperclipIcon />,
+  icon = <RhUiPaperClipIcon />,
   ...props
 }: AttachButtonProps) => {
   const { open, getInputProps } = useDropzone({

packages/module/src/MessageBar/MicrophoneButton.tsx

@@ -2,14 +2,9 @@
 // Chatbot Footer - Message Bar - Microphone
 // ============================================================================
 import type { FunctionComponent } from 'react';
-
 import { useState, useCallback, useEffect } from 'react';
-
-// Import PatternFly components
 import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
-
-// Import FontAwesome icons
-import { MicrophoneIcon } from '@patternfly/react-icons/dist/esm/icons/microphone-icon';
+import { RhUiMicrophoneFillIcon } from '@patternfly/react-icons';
 
 export interface MicrophoneButtonProps extends ButtonProps {
   /** Boolean check if the browser is listening to speech or not */
@@ -112,7 +107,7 @@ export const MicrophoneButton: FunctionComponent<MicrophoneButtonProps> = ({
         onClick={isListening ? stopListening : startListening}
         icon={
           <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
-            <MicrophoneIcon />
+            <RhUiMicrophoneFillIcon />
           </Icon>
         }
         size={isCompact ? 'sm' : undefined}

packages/module/src/MessageBox/JumpButton.tsx

@@ -2,12 +2,8 @@
 // Chatbot Main - Messages - Jump to Top
 // ============================================================================
 import type { FunctionComponent } from 'react';
-
-// Import PatternFly components
 import { Button, Tooltip, Icon, TooltipProps, ButtonProps } from '@patternfly/react-core';
-
-import { ArrowUpIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-up-icon';
-import { ArrowDownIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-down-icon';
+import { RhMicronsArrowDownIcon, RhMicronsArrowUpIcon } from '@patternfly/react-icons';
 
 export interface JumpButtonProps {
   /** Position of the Jump Button(top/bottom) */
@@ -44,7 +40,7 @@ const JumpButton: FunctionComponent<JumpButtonProps> = ({
         {...jumpButtonProps}
       >
         <Icon iconSize="lg" isInline>
-          {position === 'top' ? <ArrowUpIcon /> : <ArrowDownIcon />}
+          {position === 'top' ? <RhMicronsArrowUpIcon /> : <RhMicronsArrowDownIcon />}
         </Icon>
       </Button>
     </Tooltip>