refactor(icons): replace fa icons [EE-4459] (#7907)

refactor(icons): remove fontawesome EE-4459 refactor(icon) replace feather with lucide EE-4472
2025-08-04 21:35:23 +02:00 · 2022-11-28 15:00:28 +13:00 · 2022-11-28 15:00:28 +13:00 · d78b762f7b
commit d78b762f7b
parent 9dfac98a26
498 changed files with 2102 additions and 2817 deletions
--- a/app/react/docker/DashboardView/ContainerStatus.tsx
+++ b/app/react/docker/DashboardView/ContainerStatus.tsx
@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { Heart, Power } from 'lucide-react';

 import { Icon } from '@/react/components/Icon';

@ -17,37 +17,21 @@ export function ContainerStatus({ containers }: Props) {
    <div className="pull-right">
      <div>
        <div className="vertical-center space-right pr-5">
-          <Icon
-            icon="power"
-            className={clsx('icon icon-sm icon-success')}
-            feather
-          />
+          <Icon icon={Power} mode="success" size="sm" />
          {runningContainersFilter(containers)} running
        </div>
        <div className="vertical-center space-right">
-          <Icon
-            icon="power"
-            className={clsx('icon icon-sm icon-danger')}
-            feather
-          />
+          <Icon icon={Power} mode="danger" size="sm" />
          {stoppedContainersFilter(containers)} stopped
        </div>
      </div>
      <div>
        <div className="vertical-center space-right pr-5">
-          <Icon
-            icon="heart"
-            className={clsx('icon icon-sm icon-success')}
-            feather
-          />
+          <Icon icon={Heart} mode="success" size="sm" />
          {healthyContainersFilter(containers)} healthy
        </div>
        <div className="vertical-center space-right">
-          <Icon
-            icon="heart"
-            className={clsx('icon icon-sm icon-danger')}
-            feather
-          />
+          <Icon icon={Heart} mode="danger" size="sm" />
          {unhealthyContainersFilter(containers)} unhealthy
        </div>
      </div>
--- a/app/react/docker/DashboardView/ImagesTotalSize.tsx
+++ b/app/react/docker/DashboardView/ImagesTotalSize.tsx
@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { PieChart } from 'lucide-react';

 import { Icon } from '@/react/components/Icon';
 import { humanize } from '@/portainer/filters/filters';
@ -14,7 +15,7 @@ export function useImagesTotalSizeComponent(imagesTotalSize: number) {
 export function ImagesTotalSize({ imagesTotalSize }: Props) {
  return (
    <div className="vertical-center">
-      <Icon icon="pie-chart" className={clsx('space-right')} feather />
+      <Icon icon={PieChart} className={clsx('space-right')} />
      {humanize(imagesTotalSize)}
    </div>
  );
--- a/app/react/docker/app-templates/TemplateListSort/TemplateListSort.tsx
+++ b/app/react/docker/app-templates/TemplateListSort/TemplateListSort.tsx
@ -1,3 +1,7 @@
+import clsx from 'clsx';
+
+import { TableHeaderSortIcons } from '@@/datatables/TableHeaderSortIcons';
+
 import { TemplateListDropdown } from '../TemplateListDropdown';

 import styles from './TemplateListSort.module.css';
@ -21,10 +25,6 @@ export function TemplateListSort({
  sortByButton,
  value,
 }: Props) {
-  const upIcon = 'fa fa-sort-alpha-up';
-  const downIcon = 'fa fa-sort-alpha-down';
-  const iconStyle = sortByDescending ? upIcon : downIcon;
-
  return (
    <div className={styles.sortByContainer}>
      <div className={styles.sortByElement}>
@ -37,7 +37,7 @@ export function TemplateListSort({
      </div>
      <div className={styles.sortByElement}>
        <button
-          className={styles.sortButton}
+          className={clsx(styles.sortButton, 'h-[34px]')}
          type="button"
          disabled={!sortByButton || !value}
          onClick={(e) => {
@ -45,7 +45,10 @@ export function TemplateListSort({
            onDescending();
          }}
        >
-          <i className={iconStyle} />
+          <TableHeaderSortIcons
+            sorted={sortByButton && !!value}
+            descending={sortByDescending}
+          />
        </button>
      </div>
    </div>
--- a/app/react/docker/containers/ItemView/HealthStatus.tsx
+++ b/app/react/docker/containers/ItemView/HealthStatus.tsx
@ -1,5 +1,5 @@
 import { ComponentProps } from 'react';
-import { Server } from 'react-feather';
+import { HeartPulse, Server } from 'lucide-react';

 import { TableContainer, TableTitle } from '@@/datatables';
 import { DetailsTable } from '@@/DetailsTable';
@ -31,7 +31,7 @@ export function HealthStatus({ health }: Props) {
            <DetailsTable.Row label="Status">
              <div className="vertical-center">
                <Icon
-                  icon="fa fa-heartbeat"
+                  icon={HeartPulse}
                  mode={StatusMode[health.Status]}
                  className="space-right"
                />
--- a/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatable.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatable.tsx
@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { useStore } from 'zustand';
-import { Box } from 'react-feather';
+import { Box } from 'lucide-react';

 import { Environment } from '@/react/portainer/environments/types';
 import type { DockerContainer } from '@/react/docker/containers/types';
--- a/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableActions.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableActions.tsx
@ -7,7 +7,7 @@ import {
  Slash,
  Square,
  Trash2,
-} from 'react-feather';
+} from 'lucide-react';

 import * as notifications from '@/portainer/services/notifications';
 import { useAuthorizations, Authorized } from '@/react/hooks/useUser';
--- a/app/react/docker/containers/ListView/ContainersDatatable/columns/ports.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/columns/ports.tsx
@ -1,8 +1,11 @@
 import { Column } from 'react-table';
 import _ from 'lodash';
+import { ExternalLink } from 'lucide-react';

 import type { DockerContainer, Port } from '@/react/docker/containers/types';

+import { Icon } from '@@/Icon';
+
 import { useRowContext } from '../RowContext';

 export const ports: Column<DockerContainer> = {
@ -37,7 +40,7 @@ function PortsCell({ value: ports }: Props) {
      target="_blank"
      rel="noreferrer"
    >
-      <i className="fa fa-external-link-alt" aria-hidden="true" />
+      <Icon icon={ExternalLink} />
      {port.public}:{port.private}
    </a>
  ));
--- a/app/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions.tsx
+++ b/app/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions.tsx
@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { BarChart, FileText, Info, Paperclip, Terminal } from 'lucide-react';

 import { ContainerStatus } from '@/react/docker/containers/types';
 import { Authorized } from '@/react/hooks/useUser';
@ -51,7 +52,7 @@ export function ContainerQuickActions({
            params={{ id: containerId, nodeName }}
            title="Logs"
          >
-            <Icon icon="file-text" feather className="space-right" />
+            <Icon icon={FileText} className="space-right" />
          </Link>
        </Authorized>
      )}
@ -63,7 +64,7 @@ export function ContainerQuickActions({
            params={{ id: containerId, nodeName }}
            title="Inspect"
          >
-            <Icon icon="info" feather className="space-right" />
+            <Icon icon={Info} className="space-right" />
          </Link>
        </Authorized>
      )}
@ -75,7 +76,7 @@ export function ContainerQuickActions({
            params={{ id: containerId, nodeName }}
            title="Stats"
          >
-            <Icon icon="bar-chart" feather className="space-right" />
+            <Icon icon={BarChart} className="space-right" />
          </Link>
        </Authorized>
      )}
@ -87,7 +88,7 @@ export function ContainerQuickActions({
            params={{ id: containerId, nodeName }}
            title="Exec Console"
          >
-            <Icon icon="terminal" feather className="space-right" />
+            <Icon icon={Terminal} className="space-right" />
          </Link>
        </Authorized>
      )}
@ -99,7 +100,7 @@ export function ContainerQuickActions({
            params={{ id: containerId, nodeName }}
            title="Attach Console"
          >
-            <Icon icon="paperclip" feather className="space-right" />
+            <Icon icon={Paperclip} className="space-right" />
          </Link>
        </Authorized>
      )}
@ -122,7 +123,7 @@ function TaskQuickActions({ taskId, state }: TaskProps) {
            params={{ id: taskId }}
            title="Logs"
          >
-            <Icon icon="file-text" feather className="space-right" />
+            <Icon icon={FileText} className="space-right" />
          </Link>
        </Authorized>
      )}
@ -130,7 +131,7 @@ function TaskQuickActions({ taskId, state }: TaskProps) {
      {state.showQuickActionInspect && (
        <Authorized authorizations="DockerTaskInspect">
          <Link to="docker.tasks.task" params={{ id: taskId }} title="Inspect">
-            <Icon icon="info" feather className="space-right" />
+            <Icon icon={Info} className="space-right" />
          </Link>
        </Authorized>
      )}
--- a/app/react/docker/images/ItemView/DockerfileDetails.tsx
+++ b/app/react/docker/images/ItemView/DockerfileDetails.tsx
@ -1,4 +1,4 @@
-import { List } from 'react-feather';
+import { List } from 'lucide-react';

 import { joinCommand } from '@/docker/filters/utils';
 import { getPairKey, getPairValue } from '@/portainer/filters/filters';
--- a/app/react/docker/networks/ItemView/NetworkContainersTable.tsx
+++ b/app/react/docker/networks/ItemView/NetworkContainersTable.tsx
@ -1,3 +1,5 @@
+import { Server, Trash2 } from 'lucide-react';
+
 import { Authorized } from '@/react/hooks/useUser';
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import { Icon } from '@/react/components/Icon';
@ -39,7 +41,7 @@ export function NetworkContainersTable({

  return (
    <TableContainer>
-      <TableTitle label="Containers in network" icon="server" featherIcon />
+      <TableTitle label="Containers in network" icon={Server} />
      <Table className="nopadding">
        <DetailsTable
          headers={tableHeaders}
@ -78,11 +80,7 @@ export function NetworkContainersTable({
                      }
                    }}
                  >
-                    <Icon
-                      icon="trash-2"
-                      feather
-                      class-name="icon-secondary icon-md"
-                    />
+                    <Icon icon={Trash2} class-name="icon-secondary icon-md" />
                    Leave Network
                  </Button>
                </Authorized>
--- a/app/react/docker/networks/ItemView/NetworkDetailsTable.tsx
+++ b/app/react/docker/networks/ItemView/NetworkDetailsTable.tsx
@ -1,4 +1,5 @@
 import { Fragment } from 'react';
+import { Share2, Trash2 } from 'lucide-react';

 import DockerNetworkHelper from '@/docker/helpers/networkHelper';
 import { Authorized } from '@/react/hooks/useUser';
@ -30,7 +31,7 @@ export function NetworkDetailsTable({

  return (
    <TableContainer>
-      <TableTitle label="Network details" icon="share-2" featherIcon />
+      <TableTitle label="Network details" icon={Share2} />
      <Table className="nopadding">
        <DetailsTable dataCy="networkDetails-detailsTable">
          {/* networkRowContent */}
@ -46,8 +47,7 @@ export function NetworkDetailsTable({
                  onClick={() => onRemoveNetworkClicked()}
                >
                  <Icon
-                    icon="trash-2"
-                    feather
+                    icon={Trash2}
                    className="space-right"
                    aria-hidden="true"
                  />
--- a/app/react/docker/networks/ItemView/NetworkOptionsTable.tsx
+++ b/app/react/docker/networks/ItemView/NetworkOptionsTable.tsx
@ -1,3 +1,5 @@
+import { Share2 } from 'lucide-react';
+
 import { Table, TableContainer, TableTitle } from '@@/datatables';
 import { DetailsTable } from '@@/DetailsTable';

@ -16,7 +18,7 @@ export function NetworkOptionsTable({ options }: Props) {

  return (
    <TableContainer>
-      <TableTitle label="Network options" icon="share-2" featherIcon />
+      <TableTitle label="Network options" icon={Share2} />
      <Table className="nopadding">
        <DetailsTable dataCy="networkDetails-networkOptionsTable">
          {networkEntries.map(([key, value]) => (
--- a/app/react/docker/stacks/ItemView/StackContainersDatatable.tsx
+++ b/app/react/docker/stacks/ItemView/StackContainersDatatable.tsx
@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { useStore } from 'zustand';
-import { Box } from 'react-feather';
+import { Box } from 'lucide-react';

 import { DockerContainer } from '@/react/docker/containers/types';
 import { Environment } from '@/react/portainer/environments/types';