WIP - GNOME icons

Alignment seems off

pkg/storaged/drive/drive.jsx

@@ -24,8 +24,8 @@ import client from "../client";
 import { CardBody } from "@patternfly/react-core/dist/esm/components/Card/index.js";
 import { DescriptionList } from "@patternfly/react-core/dist/esm/components/DescriptionList/index.js";
 import { Flex } from "@patternfly/react-core/dist/esm/layouts/Flex/index.js";
-import { OutlinedHddIcon, MicrochipIcon, SaveIcon } from "@patternfly/react-icons";
 
+import { HDDIcon, SSDIcon, MediaDriveIcon } from "../icons/gnome-icons.jsx";
 import { StorageCard, StorageDescription, new_card, new_page } from "../pages.jsx";
 import { block_name, drive_name, format_temperature, fmt_size_long } from "../utils.js";
 import { make_block_page } from "../block/create-pages.jsx";
@@ -63,9 +63,9 @@ export function make_drive_page(parent, drive) {
     };
 
     const drive_icon = {
-        media: SaveIcon,
-        ssd: MicrochipIcon,
-        hdd: OutlinedHddIcon,
+        media: MediaDriveIcon,
+        ssd: SSDIcon,
+        hdd: HDDIcon,
     };
 
     const drive_card = new_card({

pkg/storaged/icons/gnome-icons.jsx

@@ -0,0 +1,48 @@
+/* Icons from the GNOME projetc, http://www.gnome.org
+
+   This work is licenced under the terms of either the GNU LGPL v3 or
+   Creative Commons Attribution-Share Alike 3.0 United States License.
+
+   To view a copy of the CC-BY-SA licence, visit
+
+   http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative
+
+   Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.
+*/
+
+import React from "react";
+
+export const NetworkIcon = () => {
+    // network-wired-symbolic.svg
+    return <svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
+               <path d="m 6 0 c -0.554688 0 -1 0.445312 -1 1 v 3 c 0 0.554688 0.445312 1 1 1 h 1 v 2 h -7 v 2 h 2 v 2 h -1 c -0.554688 0 -1 0.445312 -1 1 v 3 c 0 0.554688 0.445312 1 1 1 h 4 c 0.554688 0 1 -0.445312 1 -1 v -3 c 0 -0.554688 -0.445312 -1 -1 -1 h -1 v -2 h 8 v 2 h -1 c -0.554688 0 -1 0.445312 -1 1 v 3 c 0 0.554688 0.445312 1 1 1 h 4 c 0.554688 0 1 -0.445312 1 -1 v -3 c 0 -0.554688 -0.445312 -1 -1 -1 h -1 v -2 h 2 v -2 h -7 v -2 h 1 c 0.554688 0 1 -0.445312 1 -1 v -3 c 0 -0.554688 -0.445312 -1 -1 -1 z m 0 0" fill="#2e3436" />
+           </svg>;
+};
+
+export const VolumeIcon = () => {
+    // drive-multidisk-symbolic.svg
+    return <svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
+               <path d="m 4 0 c -1.644531 0 -3 1.355469 -3 3 v 6 c 0 1.644531 1.355469 3 3 3 h 5 c 1.644531 0 3 -1.355469 3 -3 v -6 c 0 -1.644531 -1.355469 -3 -3 -3 z m 0 2 h 5 c 0.570312 0 0.886719 0.441406 1 1 v 5 c 0 0.472656 -0.429688 1 -1 1 h -5 c -0.554688 0 -1 -0.445312 -1 -1 v -5 c 0 -0.554688 0.445312 -1 1 -1 z m 2.503906 1.003906 c -1.375 0 -2.515625 1.128906 -2.5 2.5 l -0.003906 2.496094 h 2.5 c 1.371094 0 2.5 -1.125 2.5 -2.496094 c 0 -1.375 -1.128906 -2.5 -2.5 -2.5 z m 6.496094 1.175782 v 7.820312 c 0 0.472656 -0.429688 1 -1 1 h -8 c 0 1.644531 1.355469 3 3 3 h 5 c 1.644531 0 3 -1.355469 3 -3 v -6 c 0 -1.292969 -0.839844 -2.40625 -2 -2.820312 z m -6.492188 0.320312 c 0.550782 0 1 0.449219 1 1 s -0.449218 1 -1 1 c -0.554687 0 -1 -0.449219 -1 -1 s 0.445313 -1 1 -1 z m 0 0" fill="#2e3436"/>
+           </svg>;
+};
+
+export const HDDIcon = () => {
+    // drive-harddisk-symbolic.svg
+    return <svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
+               <path d="m 4 0 c -1.644531 0 -3 1.355469 -3 3 v 10 c 0 1.644531 1.355469 3 3 3 h 8 c 1.644531 0 3 -1.355469 3 -3 v -10 c 0 -1.644531 -1.355469 -3 -3 -3 z m 0 2 h 8 c 0.570312 0 1 0.429688 1 1 v 9 c 0 0.570312 -0.429688 1 -1 1 h -8 c -0.554688 0 -1 -0.445312 -1 -1 v -9 c 0 -0.554688 0.445312 -1 1 -1 z m 4 1 c -2.210938 0 -4 1.789062 -4 4 v 4 h 4 c 2.5 0 4 -1.789062 4 -4 s -1.789062 -4 -4 -4 z m 0 2 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 s -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0" fill="#2e3436" />
+           </svg>;
+};
+
+export const SSDIcon = () => {
+    // drive-harddisk-solidstate-symbolic.svg
+    return <svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
+               <path d="m 4 0 c -1.644531 0 -3 1.355469 -3 3 v 10 c 0 1.644531 1.355469 3 3 3 h 8 c 1.644531 0 3 -1.355469 3 -3 v -10 c 0 -1.644531 -1.355469 -3 -3 -3 z m 0 2 h 8 c 0.570312 0 1 0.429688 1 1 v 9 c 0 0.570312 -0.429688 1 -1 1 h -8 c -0.554688 0 -1 -0.445312 -1 -1 v -9 c 0 -0.554688 0.445312 -1 1 -1 z m 1 1 v 1 h -1 v 6 h 2 v 1 h 1 v -1 h 1 v 1 h 1 v -1 h 1 v 1 h 1 v -1 h 1 v -6 h -2 v -1 h -1 v 1 h -1 v -1 h -1 v 1 h -1 v -1 z m 0 0" fill="#2e3436" />
+           </svg>;
+};
+
+export const MediaDriveIcon = () => {
+    // drive-optical-symbolic.svg
+    return <svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
+               <path d="m 3 0 c -1.644531 0 -3 1.355469 -3 3 v 6 c 0 1.292969 0.839844 2.40625 2 2.824219 v -0.824219 c 0 -0.101562 0.015625 -0.199219 0.042969 -0.292969 c 0.351562 2.972657 2.890625 5.292969 5.957031 5.292969 s 5.605469 -2.320312 5.957031 -5.292969 c 0.027344 0.09375 0.042969 0.191407 0.042969 0.292969 v 0.824219 c 1.160156 -0.417969 2 -1.53125 2 -2.824219 v -6 c 0 -1.644531 -1.355469 -3 -3 -3 z m 0 2 h 10 c 0.570312 0 1 0.429688 1 1 v 4 c 0 0.554688 -0.445312 1 -1 1 h -10 c -0.554688 0 -1 -0.445312 -1 -1 v -4 c 0 -0.570312 0.5 -1 1 -1 z m 0.5 4 c -0.277344 0 -0.5 0.222656 -0.5 0.5 s 0.222656 0.5 0.5 0.5 h 9 c 0.277344 0 0.5 -0.222656 0.5 -0.5 s -0.222656 -0.5 -0.5 -0.5 z m 0 4 h 2.25 c 0 1.242188 1.007812 2.25 2.25 2.25 s 2.25 -1.007812 2.25 -2.25 h 2.25 c 0 2.484375 -2.015625 4.5 -4.5 4.5 s -4.5 -2.015625 -4.5 -4.5 z m 3 0 h 0.75 c 0 0.414062 0.335938 0.75 0.75 0.75 s 0.75 -0.335938 0.75 -0.75 h 0.75 c 0 0.828125 -0.671875 1.5 -1.5 1.5 s -1.5 -0.671875 -1.5 -1.5 z m 0 0" fill="#2e3434" />
+           </svg>;
+};

pkg/storaged/iscsi/session.jsx

@@ -23,8 +23,8 @@ import client from "../client";
 
 import { CardBody } from "@patternfly/react-core/dist/esm/components/Card/index.js";
 import { DescriptionList } from "@patternfly/react-core/dist/esm/components/DescriptionList/index.js";
-import { NetworkIcon } from "@patternfly/react-icons";
 
+import { NetworkIcon } from "../icons/gnome-icons.jsx";
 import { StorageDescription, new_page, new_card, ChildrenTable, StorageCard } from "../pages.jsx";
 
 import { make_drive_page } from "../drive/drive.jsx";

pkg/storaged/lvm2/volume-group.jsx

@@ -24,10 +24,10 @@ import client from "../client";
 import { Alert } from "@patternfly/react-core/dist/esm/components/Alert/index.js";
 import { CardHeader, CardBody } from "@patternfly/react-core/dist/esm/components/Card/index.js";
 import { DescriptionList } from "@patternfly/react-core/dist/esm/components/DescriptionList/index.js";
-import { VolumeIcon } from "@patternfly/react-icons";
 
 import { useObject } from "hooks";
 
+import { VolumeIcon } from "../icons/gnome-icons.jsx";
 import { StorageButton, StorageLink } from "../storage-controls.jsx";
 import {
     StorageCard, StorageDescription, ChildrenTable, PageTable, new_page, new_card, get_crossrefs,

pkg/storaged/mdraid/mdraid.jsx

@@ -24,8 +24,8 @@ import client from "../client";
 import { Alert } from "@patternfly/react-core/dist/esm/components/Alert/index.js";
 import { CardHeader, CardBody } from "@patternfly/react-core/dist/esm/components/Card/index.js";
 import { DescriptionList } from "@patternfly/react-core/dist/esm/components/DescriptionList/index.js";
-import { VolumeIcon } from "@patternfly/react-icons";
 
+import { VolumeIcon } from "../icons/gnome-icons.jsx";
 import { StorageButton, StorageLink } from "../storage-controls.jsx";
 import { StorageCard, StorageDescription, PageTable, new_page, new_card, get_crossrefs, navigate_away_from_card } from "../pages.jsx";
 import { make_block_page } from "../block/create-pages.jsx";

pkg/storaged/nfs/nfs.jsx

@@ -24,8 +24,8 @@ import client from "../client";
 import { Alert } from "@patternfly/react-core/dist/esm/components/Alert/index.js";
 import { CardBody } from "@patternfly/react-core/dist/esm/components/Card/index.js";
 import { DescriptionList } from "@patternfly/react-core/dist/esm/components/DescriptionList/index.js";
-import { NetworkIcon } from "@patternfly/react-icons";
 
+import { NetworkIcon } from "../icons/gnome-icons.jsx";
 import {
     dialog_open, TextInput, ComboBox, CheckBoxes,
     StopProcessesMessage, stop_processes_danger_message

pkg/storaged/storage.scss

@@ -61,12 +61,12 @@
     padding-block: 0.75em;
     padding-inline: 0;
   }
-  
+
   td, th {
     &:first-child {
       padding-inline-start: 0.75em;
     }
-  
+
     &:last-child {
       padding-inline-end: 0.75em;
     }

pkg/storaged/stratis/pool.jsx

@@ -26,8 +26,8 @@ import { Alert } from "@patternfly/react-core/dist/esm/components/Alert/index.js
 import { CardHeader, CardBody } from "@patternfly/react-core/dist/esm/components/Card/index.js";
 import { DescriptionList } from "@patternfly/react-core/dist/esm/components/DescriptionList/index.js";
 import { Flex, FlexItem } from "@patternfly/react-core/dist/esm/layouts/Flex/index.js";
-import { VolumeIcon } from "@patternfly/react-icons";
 
+import { VolumeIcon } from "../icons/gnome-icons.jsx";
 import { fmt_to_fragments } from "utils.jsx";
 
 import { StorageButton, StorageUsageBar, StorageLink } from "../storage-controls.jsx";