feat: bundle svg files to prevent image flicker

.eslintrc.cjs

@@ -15,7 +15,7 @@ module.exports = {
     "plugin:react-hooks/recommended",
     "plugin:prettier/recommended",
   ],
-  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  ignorePatterns: ["dist", ".eslintrc.cjs", "vite.config.ts"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     sourceType: "module",
@@ -47,5 +47,6 @@ module.exports = {
       "warn",
       { allowConstantExport: true },
     ],
+    "no-console": "off",
   },
 };

package.json

@@ -47,6 +47,7 @@
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
     "typescript": "5.4.5",
-    "vite": "^5.2.10"
+    "vite": "^5.2.10",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }

src/assets/icons/icon.tsx

@@ -1,27 +1,18 @@
-import styled from "@emotion/styled";
-import MicMute from "./mic_off.svg";
-import MicUnmute from "./mic_on.svg";
-import Arrow from "./arrow_back.svg";
-import RemoveSvg from "./clear.svg";
-import VolumeOn from "./volume_on.svg";
-import VolumeOff from "./volume_off.svg";
+import MicMute from "./mic_off.svg?react";
+import MicUnmute from "./mic_on.svg?react";
+import Arrow from "./arrow_back.svg?react";
+import RemoveSvg from "./clear.svg?react";
+import VolumeOn from "./volume_on.svg?react";
+import VolumeOff from "./volume_off.svg?react";
 
-const Icon = styled.img`
-  width: 100%;
-  height: auto;
-  display: block;
-`;
+export const MicMuted = () => <MicMute />;
 
-export const MicMuted = () => <Icon src={MicMute} alt="off-microphone" />;
+export const MicUnmuted = () => <MicUnmute />;
 
-export const MicUnmuted = () => <Icon src={MicUnmute} alt="on-microphone" />;
+export const BackArrow = () => <Arrow />;
 
-export const BackArrow = () => <Icon src={Arrow} alt="arrow-left" />;
+export const RemoveIcon = () => <RemoveSvg />;
 
-export const RemoveIcon = () => <Icon src={RemoveSvg} alt="cross" />;
+export const SpeakerOff = () => <VolumeOff />;
 
-export const SpeakerOff = () => (
-  <Icon src={VolumeOff} alt="speaker-crossed-over" />
-);
-
-export const SpeakerOn = () => <Icon src={VolumeOn} alt="speaker" />;
+export const SpeakerOn = () => <VolumeOn />;

src/index.css

@@ -172,10 +172,12 @@ body {
 }
 
 /* image size contstrained to container size */
-img {
+img,
+svg {
   /* max-width: 100%; */
   width: 100%;
   height: auto;
+  display: block;
 }
 
 #root {

src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

vite.config.ts

@@ -1,7 +1,8 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
+import svgr from "vite-plugin-svgr";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), svgr()],
 });