perf(web): memoize icon components

web/src/Events.jsx

@@ -259,7 +259,7 @@ function Filters({ onChange, searchParams }) {
   }, [data]);
 
   return (
-    <div className="flex space-x-8">
+    <div className="flex space-x-4">
       <Filter onChange={onChange} options={cameras} paramName="camera" searchParams={searchParams} />
       <Filter onChange={onChange} options={zones} paramName="zone" searchParams={searchParams} />
       <Filter onChange={onChange} options={labels} paramName="label" searchParams={searchParams} />

web/src/icons/ArrowDropdown.jsx

@@ -1,6 +1,7 @@
 import { h } from 'preact';
+import { memo } from 'preact/compat';
 
-export default function ArrowDropdown() {
+export function ArrowDropdown() {
   return (
     <svg className="fill-current" viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none" />
@@ -8,3 +9,5 @@ export default function ArrowDropdown() {
     </svg>
   );
 }
+
+export default memo(ArrowDropdown);

web/src/icons/ArrowDropup.jsx

@@ -1,6 +1,7 @@
 import { h } from 'preact';
+import { memo } from 'preact/compat';
 
-export default function ArrowDropup() {
+export function ArrowDropup() {
   return (
     <svg className="fill-current" viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none" />
@@ -8,3 +9,5 @@ export default function ArrowDropup() {
     </svg>
   );
 }
+
+export default memo(ArrowDropup);

web/src/icons/AutoAwesome.jsx

@@ -1,6 +1,7 @@
 import { h } from 'preact';
+import { memo } from 'preact/compat';
 
-export default function ArrowDropdown() {
+export function AutoAwesome() {
   return (
     <svg className="fill-current" viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none" />
@@ -8,3 +9,5 @@ export default function ArrowDropdown() {
     </svg>
   );
 }
+
+export default memo(AutoAwesome);

web/src/icons/DarkMode.jsx

@@ -1,6 +1,7 @@
 import { h } from 'preact';
+import { memo } from 'preact/compat';
 
-export default function DarkMode() {
+export function DarkMode() {
   return (
     <svg className="fill-current" viewBox="0 0 24 24">
       <rect fill="none" height="24" width="24" />
@@ -8,3 +9,5 @@ export default function DarkMode() {
     </svg>
   );
 }
+
+export default memo(DarkMode);

web/src/icons/LightMode.jsx

@@ -1,6 +1,7 @@
 import { h } from 'preact';
+import { memo } from 'preact/compat';
 
-export default function ArrowDropdown() {
+export function LightMode() {
   return (
     <svg className="fill-current" viewBox="0 0 24 24">
       <rect fill="none" height="24" width="24" />
@@ -8,3 +9,5 @@ export default function ArrowDropdown() {
     </svg>
   );
 }
+
+export default memo(LightMode);

web/src/icons/Menu.jsx

@@ -1,6 +1,7 @@
 import { h } from 'preact';
+import { memo } from 'preact/compat';
 
-export default function Menu() {
+export function Menu() {
   return (
     <svg className="fill-current" viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none" />
@@ -8,3 +9,5 @@ export default function Menu() {
     </svg>
   );
 }
+
+export default memo(Menu);

web/src/icons/MenuOpen.jsx

@@ -1,6 +1,7 @@
 import { h } from 'preact';
+import { memo } from 'preact/compat';
 
-export default function MenuOpen() {
+export function MenuOpen() {
   return (
     <svg className="fill-current" viewBox="0 0 24 24">
       <path d="M0 0h24v24H0V0z" fill="none" />
@@ -8,3 +9,5 @@ export default function MenuOpen() {
     </svg>
   );
 }
+
+export default memo(MenuOpen);

web/src/icons/More.jsx

@@ -1,6 +1,7 @@
 import { h } from 'preact';
+import { memo } from 'preact/compat';
 
-export default function More() {
+export function More() {
   return (
     <svg className="fill-current" viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none" />
@@ -8,3 +9,5 @@ export default function More() {
     </svg>
   );
 }
+
+export default memo(More);

web/src/icons/Settings.jsx

@@ -1,6 +1,7 @@
 import { h } from 'preact';
+import { memo } from 'preact/compat';
 
-export default function DarkMode() {
+export function Settings() {
   return (
     <svg className="fill-current" viewBox="0 0 24 24">
       <g>
@@ -10,3 +11,5 @@ export default function DarkMode() {
     </svg>
   );
 }
+
+export default memo(Settings);