Add a few custom icons, tweak colors for contrast/uniformity

package.json

@@ -15,6 +15,7 @@
     "react-devtools": "npx react-devtools"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@tauri-apps/cli": "^1.4.0",
     "@types/lodash-es": "^4.17.8",
     "@types/luxon": "^3.3.1",

src/components/miscbuttons.tsx

@@ -19,6 +19,7 @@
 import type { MantineNumberSize } from "@mantine/core";
 import { ActionIcon, useMantineColorScheme } from "@mantine/core";
 import * as Icon from "react-bootstrap-icons";
+import FontSizeIcon from "svg/icons/fontsize.svg";
 import React from "react";
 import { VersionModal } from "components/modals/version";
 import { useDisclosure, useHotkeys } from "@mantine/hooks";
@@ -81,7 +82,7 @@ export function FontSizeToggle() {
             title={`Toggle font size (${modKeyString()} + =)`}
             my="auto"
         >
-            <Icon.Fonts size="1.1rem" />
+            <FontSizeIcon width="1.1rem" height="1.1rem" fill="currentColor" />
         </ActionIcon>
     );
 }

src/components/modals/version.tsx

@@ -62,7 +62,7 @@ export function VersionModal({ opened, close }: ModalState) {
             </Text>
             <Divider px="sm" my="xl" />
             <Flex gap="md" align="center">
-                <img src={AppLogo} />
+                <AppLogo style={{ flexShrink: 0 }} />
                 <Grid>
                     <Grid.Col span={4}>Version</Grid.Col>
                     <Grid.Col span={8}>{appVersion.gitVersion}</Grid.Col>
@@ -80,8 +80,8 @@ export function VersionModal({ opened, close }: ModalState) {
                 powered by
             </Text>
             <Flex justify="center">
-                <Anchor href="https://react.dev/" target="_blank" rel="noreferrer"><img src={ReactLogo} /></Anchor>
-                <Anchor href="https://tauri.app/" target="_blank" rel="noreferrer"><img src={TauriLogo} /></Anchor>
+                <Anchor href="https://react.dev/" target="_blank" rel="noreferrer"><ReactLogo /></Anchor>
+                <Anchor href="https://tauri.app/" target="_blank" rel="noreferrer"><TauriLogo /></Anchor>
             </Flex>
         </HkModal>
     );

src/components/statusicons.tsx

@@ -20,6 +20,8 @@ import { useMantineTheme } from "@mantine/core";
 import React from "react";
 import * as Icon from "react-bootstrap-icons";
 import { Status } from "rpc/transmission";
+import ActiveIcon from "svg/icons/active.svg";
+import PausedIcon from "svg/icons/paused.svg";
 
 export function All() {
     const theme = useMantineTheme();
@@ -38,7 +40,7 @@ export function Completed() {
 
 export function Active() {
     const theme = useMantineTheme();
-    return <Icon.Activity size="1rem" fill={theme.colors.red[6]} />;
+    return <ActiveIcon width="1rem" height="1rem" fill={theme.colors.red[6]} />;
 }
 
 export function Inactive() {
@@ -48,12 +50,12 @@ export function Inactive() {
 
 export function Stopped() {
     const theme = useMantineTheme();
-    return <Icon.PauseBtnFill size="1rem" fill={theme.colors.yellow[6]} />;
+    return <PausedIcon width="1rem" height="1rem" fill={theme.colors.yellow[6]} />;
 }
 
 export function Error() {
     const theme = useMantineTheme();
-    return <Icon.XSquareFill size="1rem" fill={theme.colors.red[9]} />;
+    return <Icon.XSquareFill size="1rem" fill={theme.colors.red[6]} />;
 }
 
 export function Waiting() {

src/components/toolbar.tsx

@@ -21,6 +21,7 @@ import { ActionIcon, Button, Flex, Kbd, Menu, TextInput, useMantineTheme } from
 import debounce from "lodash-es/debounce";
 import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import * as Icon from "react-bootstrap-icons";
+import PriorityIcon from "svg/icons/priority.svg";
 import type { PriorityNumberType } from "rpc/transmission";
 import { BandwidthPriority } from "rpc/transmission";
 import { useTorrentAction, useMutateSession, useMutateTorrent } from "queries";
@@ -268,7 +269,8 @@ function Toolbar(props: ToolbarProps) {
                 <Menu shadow="md" width="10rem" withinPortal middlewares={{ shift: true, flip: false }}>
                     <Menu.Target>
                         <ToolbarButton title="Set priority">
-                            <Icon.ExclamationCircleFill size="1.5rem" color={theme.colors.yellow[4]} />
+                            <PriorityIcon width="1.5rem" height="1.5rem"
+                                fill={theme.colors.yellow[theme.colorScheme === "dark" ? 4 : 6]} />
                         </ToolbarButton>
                     </Menu.Target>
 

src/types/svg.d.ts

@@ -1,4 +1,7 @@
 declare module "*.svg" {
-    const content: string;
-    export default content;
+    import type React from "react";
+
+    const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement> & { title?: string }>;
+
+    export default ReactComponent;
 }

webpack.common.js

@@ -94,8 +94,9 @@ export default (mode) => ({
                 exclude: /node_modules/,
             },
             {
-                test: /\.svg$/,
-                type: "asset/inline",
+                test: /\.svg$/i,
+                issuer: /\.[jt]sx?$/,
+                use: ["@svgr/webpack"],
             },
         ],
         parser: {