react icons + custom svgs

Author: jpinsonneau

web/package-lock.json

@@ -119,6 +119,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^11.8.11",
+    "react-icons": "^5.5.0",
     "react-modal": "^3.14.4",
     "react-router": "^5.3.0",
     "react-router-dom": "^5.3.0"

web/package.json

@@ -1,6 +1,6 @@
 import { ResourceIcon, ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
 import { Button, Flex, FlexItem, Popover, Text, TextContent, TextVariants, Tooltip } from '@patternfly/react-core';
-import { FilterIcon, GlobeAmericasIcon, TimesIcon, ToggleOffIcon, ToggleOnIcon } from '@patternfly/react-icons';
+import { GlobeAmericasIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -16,6 +16,7 @@ import { formatPort } from '../../../utils/port';
 import { formatProtocol, getProtocolDocUrl } from '../../../utils/protocol';
 import { getFlagsList, getTCPFlagsDocUrl } from '../../../utils/tcp-flags';
 import { Size } from '../../dropdowns/table-display-dropdown';
+import { FilterAddIcon, FilterRemoveIcon, FilterToggleOffIcon, FilterToggleOnIcon } from '../../icons';
 import './record-field.css';
 
 export type RecordFieldFilter = {
@@ -635,14 +636,14 @@ export const RecordField: React.FC<RecordFieldProps> = ({
           <Button variant="link" aria-label="Filter" onClick={filter.onClick}>
             {filter.type === 'filter' ? (
               filter.isDelete ? (
-                <TimesIcon />
+                <FilterRemoveIcon />
               ) : (
-                <FilterIcon />
+                <FilterAddIcon />
               )
             ) : filter.isDelete ? (
-              <ToggleOffIcon />
+              <FilterToggleOffIcon />
             ) : (
-              <ToggleOnIcon />
+              <FilterToggleOnIcon />
             )}
           </Button>
         </Tooltip>

web/src/components/drawer/record/record-field.tsx

@@ -1,8 +1,8 @@
 import { Dropdown, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
-import { LongArrowAltDownIcon, LongArrowAltUpIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Match } from '../../model/flow-query';
+import { BackAndForthIcon } from '../icons';
 
 export interface MatchDropdownProps {
   selected: Match;
@@ -26,12 +26,7 @@ export const MatchDropdown: React.FC<MatchDropdownProps> = ({ allowBidirectional
       case 'bidirectional':
         if (allowBidirectional) {
           if (toggle) {
-            return (
-              <div style={{ transform: 'rotate(90deg)' }}>
-                <LongArrowAltUpIcon />
-                <LongArrowAltDownIcon />
-              </div>
-            );
+            return <BackAndForthIcon size="1.5em" />;
           } else {
             return t('Bidirectional');
           }

web/src/components/dropdowns/match-dropdown.tsx

@@ -0,0 +1,13 @@
+/**
+ * Icon components for Network Observability
+ *
+ * This module exports custom icons and icon wrappers for consistent styling
+ * across the application. It includes:
+ * - React Icons wrapper for consistent sizing
+ * - Kubernetes resource icons
+ * - Network-specific icons (filters, packets, etc.)
+ */
+
+export * from './kubernetes-icons';
+export * from './react-icons';
+export * from './react-icons-wrapper';