Icons and main menu and active tabs (#4098)

* Add: main menu icons and active tabs * Update menu.jsx * change: update icons * address comments
greenbone · Sep 6, 2024 · 299125a · 299125a
1 parent 49657d7
commit 299125a
Show file tree

Hide file tree

Showing 115 changed files with 655 additions and 837 deletions.
diff --git a/src/web/components/icon/IconWithStrokeWidth.jsx b/src/web/components/icon/IconWithStrokeWidth.jsx
@@ -0,0 +1,17 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import PropTypes from 'prop-types';
+
+const IconWithStrokeWidth = ({IconComponent, strokeWidth = 1.5, ...props}) => {
+  return <IconComponent {...props} strokeWidth={strokeWidth} />;
+};
+
+IconWithStrokeWidth.propTypes = {
+  IconComponent: PropTypes.elementType.isRequired,
+  strokeWidth: PropTypes.number,
+};
+
+export default IconWithStrokeWidth;
diff --git a/src/web/components/icon/alerticon.jsx b/src/web/components/icon/alerticon.jsx
@@ -5,9 +5,12 @@
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/alert.svg';
+import {Megaphone as Icon} from 'lucide-react';
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
-const AlertIcon = withSvgIcon()(Icon);
+const AlertIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default AlertIcon;
 

diff --git a/src/web/components/icon/alterableicon.jsx b/src/web/components/icon/alterableicon.jsx
@@ -5,9 +5,12 @@
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/alterable.svg';
+import {FilePenLine as Icon} from 'lucide-react';
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
-const AlterableIcon = withSvgIcon()(Icon);
+const AlterableIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default AlterableIcon;
 

diff --git a/src/web/components/icon/auditicon.jsx b/src/web/components/icon/auditicon.jsx
@@ -5,9 +5,13 @@
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/audit.svg';
+import {ClipboardCheck as Icon} from 'lucide-react';
 
-const AuditIcon = withSvgIcon()(Icon);
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
+
+const AuditIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default AuditIcon;
 

diff --git a/src/web/components/icon/calendaricon.jsx b/src/web/components/icon/calendaricon.jsx
@@ -5,9 +5,12 @@
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/calendar.svg';
+import {Calendar as Icon} from 'lucide-react';
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
-const CalendarIcon = withSvgIcon()(Icon);
+const CalendarIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default CalendarIcon;
 

diff --git a/src/web/components/icon/credentialicon.jsx b/src/web/components/icon/credentialicon.jsx
@@ -5,9 +5,13 @@
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/credential.svg';
+import {KeyRound as Icon} from 'lucide-react';
 
-const CredentialIcon = withSvgIcon()(Icon);
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
+
+const CredentialIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default CredentialIcon;
 

diff --git a/src/web/components/icon/dashboardicon.jsx b/src/web/components/icon/dashboardicon.jsx
@@ -5,9 +5,13 @@
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/dashboard.svg';
+import {BarChart3 as Icon} from 'lucide-react';
 
-const DashboardIcon = withSvgIcon()(Icon);
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
+
+const DashboardIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default DashboardIcon;
 

diff --git a/src/web/components/icon/deleteicon.jsx b/src/web/components/icon/deleteicon.jsx
@@ -15,9 +15,13 @@ import SelectionType from 'web/utils/selectiontype';
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/delete.svg';
+import {CircleX as Icon} from 'lucide-react';
 
-const DeleteSvgIcon = withSvgIcon()(Icon);
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
+
+const DeleteSvgIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 const DeleteIcon = ({selectionType, title, ...props}) => {
   if (!isDefined(title)) {

diff --git a/src/web/components/icon/detailsicon.jsx b/src/web/components/icon/detailsicon.jsx
@@ -7,11 +7,12 @@ import React from 'react';
 
 import SvgIcon from './svgicon';
 
-import Icon from './svg/details.svg';
+import {ZoomIn as Icon} from 'lucide-react';
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const DetailsIcon = props => (
   <SvgIcon {...props}>
-    <Icon />
+    <IconWithStrokeWidth IconComponent={Icon} {...props} />
   </SvgIcon>
 );
 

diff --git a/src/web/components/icon/disableicon.jsx b/src/web/components/icon/disableicon.jsx
@@ -5,9 +5,13 @@
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/disable.svg';
+import {PowerOff as Icon} from 'lucide-react';
 
-const DisableIcon = withSvgIcon()(Icon);
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
+
+const DisableIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default DisableIcon;
 

diff --git a/src/web/components/icon/downloadicon.jsx b/src/web/components/icon/downloadicon.jsx
@@ -3,12 +3,15 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/download.svg';
+import {Download as Icon} from 'lucide-react';
+
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
-const DownloadIcon = withSvgIcon()(Icon);
+const DownloadIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default DownloadIcon;
 

diff --git a/src/web/components/icon/editicon.jsx b/src/web/components/icon/editicon.jsx
@@ -5,9 +5,13 @@
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/edit.svg';
+import {Pencil as Icon} from 'lucide-react';
 
-const EditIcon = withSvgIcon()(Icon);
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
+
+const EditIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default EditIcon;
 

diff --git a/src/web/components/icon/enableicon.jsx b/src/web/components/icon/enableicon.jsx
@@ -5,9 +5,13 @@
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/enable.svg';
+import {Power as Icon} from 'lucide-react';
 
-const EnableIcon = withSvgIcon()(Icon);
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
+
+const EnableIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default EnableIcon;
 

diff --git a/src/web/components/icon/exporticon.jsx b/src/web/components/icon/exporticon.jsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-
 import React from 'react';
 
 import _ from 'gmp/locale';
@@ -14,9 +13,13 @@ import SelectionType from 'web/utils/selectiontype';
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/export.svg';
+import {FileOutput as Icon} from 'lucide-react';
+
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
-const ExportSvgIcon = withSvgIcon()(Icon);
+const ExportSvgIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 const ExportIcon = ({selectionType, title, ...other}) => {
   let download_title = title;

diff --git a/src/web/components/icon/feedicon.jsx b/src/web/components/icon/feedicon.jsx
@@ -5,9 +5,12 @@
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/feed.svg';
+import {Rss as Icon} from 'lucide-react';
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
-const FeedIcon = withSvgIcon()(Icon);
+const FeedIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default FeedIcon;
 

diff --git a/src/web/components/icon/filtericon.jsx b/src/web/components/icon/filtericon.jsx
@@ -5,9 +5,13 @@
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/filter.svg';
+import {Filter as Icon} from 'lucide-react';
 
-const FilterIcon = withSvgIcon()(Icon);
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
+
+const FilterIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default FilterIcon;
 

diff --git a/src/web/components/icon/firsticon.jsx b/src/web/components/icon/firsticon.jsx
@@ -5,9 +5,13 @@
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/first.svg';
+import {ChevronFirst as Icon} from 'lucide-react';
 
-const FirstIcon = withSvgIcon()(Icon);
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
+
+const FirstIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default FirstIcon;
 

diff --git a/src/web/components/icon/foldicon.jsx b/src/web/components/icon/foldicon.jsx
@@ -5,9 +5,12 @@
 
 import withSvgIcon from './withSvgIcon';
 
-import FoldSvg from './svg/fold.svg';
+import {Folder as Icon} from 'lucide-react';
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
-const FoldIcon = withSvgIcon()(FoldSvg);
+const FoldIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default FoldIcon;
 

diff --git a/src/web/components/icon/groupicon.jsx b/src/web/components/icon/groupicon.jsx
@@ -5,9 +5,13 @@
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/group.svg';
+import {Users as Icon} from 'lucide-react';
 
-const GroupIcon = withSvgIcon()(Icon);
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
+
+const GroupIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default GroupIcon;
 

diff --git a/src/web/components/icon/helpicon.jsx b/src/web/components/icon/helpicon.jsx
@@ -5,9 +5,13 @@
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/help.svg';
+import {HelpCircle as Icon} from 'lucide-react';
 
-const HelpIcon = withSvgIcon()(Icon);
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
+
+const HelpIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default HelpIcon;
 

diff --git a/src/web/components/icon/importicon.jsx b/src/web/components/icon/importicon.jsx
@@ -5,9 +5,13 @@
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/import.svg';
+import {FileInput as Icon} from 'lucide-react';
 
-const ImportIcon = withSvgIcon()(Icon);
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
+
+const ImportIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default ImportIcon;
 

diff --git a/src/web/components/icon/infoicon.jsx b/src/web/components/icon/infoicon.jsx
@@ -5,9 +5,13 @@
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/info.svg';
+import {Info as Icon} from 'lucide-react';
 
-const InfoIcon = withSvgIcon()(Icon);
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
+
+const InfoIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default InfoIcon;
 

diff --git a/src/web/components/icon/keyicon.jsx b/src/web/components/icon/keyicon.jsx
@@ -5,9 +5,13 @@
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/key.svg';
+import {Key as Icon} from 'lucide-react';
 
-const KeyIcon = withSvgIcon()(Icon);
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
+
+const KeyIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default KeyIcon;
 

diff --git a/src/web/components/icon/lasticon.jsx b/src/web/components/icon/lasticon.jsx
@@ -5,9 +5,13 @@
 
 import withSvgIcon from './withSvgIcon';
 
-import Icon from './svg/last.svg';
+import {ChevronLast as Icon} from 'lucide-react';
 
-const LastIcon = withSvgIcon()(Icon);
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
+
+const LastIcon = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+));
 
 export default LastIcon;