querysub 0.2.0

package/src/library-components/icons.tsx

@@ -0,0 +1,692 @@
+import preact from "preact"; import { qreact, rehydrateVirtualDOM } from "../../src/4-dom/qreact";
+import { Length } from "../../src/4-dom/cssTypes";
+import { VirtualDOM } from "../../src/4-dom/qreact";
+import { setFlag } from "socket-function/require/compileFlags";
+import { cacheJSONArgsEqual, cacheShallowConfigArgEqual } from "socket-function/src/caching";
+import { deepCloneJSON, list } from "socket-function/src/misc";
+import { canHaveChildren } from "socket-function/src/types";
+import { renderToString } from "./renderToString";
+import { debugTime } from "../../src/0-path-value-core/pathValueCore";
+import { measureBlock } from "socket-function/src/profiling/measure";
+
+// Most icons are from https://www.figma.com/file/eVpKKmt8uOKmSYKW4LyusF/Free-Icon-Pack-1600%2B-icons-(Community)?node-id=1654-9894&t=0bDbK0bA9KGpswRE-0
+
+// TODO: Add a build step that does this (storing the .svgs in a file), so we don't
+//  need to process them at runtime.
+
+let createFastSVG = cacheShallowConfigArgEqual((config: {
+    svgBase: preact.VNode;
+    stroke?: string;
+    fill?: string;
+}) => {
+    let { svgBase, stroke, fill } = config;
+    measureBlock(function cloneSVGBeforeMutate() {
+        svgBase = JSON.parse(JSON.stringify(svgBase));
+        svgBase = rehydrateVirtualDOM(svgBase);
+    });
+    function iterate(node: VirtualDOM | undefined, callback: (node: VirtualDOM) => void) {
+        if (!canHaveChildren(node)) return;
+        if (Array.isArray(node)) {
+            for (let child of node) {
+                iterate(child, callback);
+            }
+        } else {
+            iterate(node.props.children as any, callback);
+            callback(node);
+        }
+
+    }
+    iterate(svgBase as VirtualDOM, (node) => {
+        if (canHaveChildren(node)) {
+            if (fill) {
+                node.props.fill = fill;
+            }
+            if (stroke) {
+                node.props.stroke = stroke;
+            }
+        }
+    });
+
+    // Encoding as a string greatly increases the render speed (as it means preact doesn't need
+    //  to process the entire SVG structure, and instead the browser does, which is a lot faster, and can cache it).
+    //  - It also makes resizing it easier, and layout more natural (due to how image tags layout)
+    let str = renderToString(svgBase);
+    let dataEncoded = "data:image/svg+xml;base64," + Buffer.from(str).toString("base64");
+    return (attributes?: preact.JSX.HTMLAttributes<HTMLImageElement>) => {
+        // Returning element is useful for editting the SVGs in devtools (but is a lot slower to render
+        //      many large SVGs).
+        return <img {...attributes as any} draggable={false} src={dataEncoded} />;
+    };
+
+}, 10000);
+
+function fastSVG(element: preact.VNode) {
+    return (config?: {
+        size?: Length;
+        stroke?: string;
+        fill?: string;
+        style?: preact.JSX.CSSProperties;
+    }) => createFastSVG({
+        svgBase: element,
+        stroke: config?.stroke,
+        fill: config?.fill,
+    })({
+        width: config?.size,
+        style: config?.style,
+    });
+}
+
+let rename = fastSVG(
+    <svg
+        width="24" height="24" viewBox="-1 1 23 25" fill="none" xmlns="http://www.w3.org/2000/svg"
+    >
+        <path d="M5.98012 19.3734L8.60809 18.7164C8.62428 18.7124 8.64043 18.7084 8.65654 18.7044C8.87531 18.65 9.08562 18.5978 9.27707 18.4894C9.46852 18.381 9.62153 18.2275 9.7807 18.0679C9.79242 18.0561 9.80418 18.0444 9.81598 18.0325L17.0101 10.8385L17.0101 10.8385L17.0369 10.8117C17.3472 10.5014 17.6215 10.2272 17.8128 9.97638C18.0202 9.70457 18.1858 9.39104 18.1858 9C18.1858 8.60896 18.0202 8.29543 17.8128 8.02361C17.6215 7.77285 17.3472 7.49863 17.0369 7.18835L17.01 7.16152L16.8385 6.98995L16.8117 6.96314C16.5014 6.6528 16.2272 6.37853 15.9764 6.1872C15.7046 5.97981 15.391 5.81421 15 5.81421C14.609 5.81421 14.2954 5.97981 14.0236 6.1872C13.7729 6.37853 13.4986 6.65278 13.1884 6.96311L13.1615 6.98995L5.96745 14.184C5.95565 14.1958 5.94386 14.2076 5.93211 14.2193C5.77249 14.3785 5.61904 14.5315 5.51064 14.7229C5.40225 14.9144 5.34999 15.1247 5.29562 15.3435C5.29162 15.3596 5.28761 15.3757 5.28356 15.3919L4.62003 18.046C4.61762 18.0557 4.61518 18.0654 4.61272 18.0752C4.57411 18.2293 4.53044 18.4035 4.51593 18.5518C4.49978 18.7169 4.50127 19.0162 4.74255 19.2574C4.98383 19.4987 5.28307 19.5002 5.44819 19.4841C5.59646 19.4696 5.77072 19.4259 5.92479 19.3873C5.9346 19.3848 5.94433 19.3824 5.95396 19.38L5.95397 19.38L5.9801 19.3734L5.98012 19.3734Z" stroke="#33363F" stroke-width="1.2" fill="hsl(330, 50%, 60%)" />
+        <path d="M12.5 7.5L5.92819 14.0718C5.71566 14.2843 5.60939 14.3906 5.53953 14.5212C5.46966 14.6517 5.44019 14.7991 5.38124 15.0938L4.64709 18.7646C4.58057 19.0972 4.5473 19.2635 4.64191 19.3581C4.73652 19.4527 4.90283 19.4194 5.23544 19.3529L8.90621 18.6188C9.20093 18.5598 9.3483 18.5303 9.47885 18.4605C9.60939 18.3906 9.71566 18.2843 9.92819 18.0718L16.5 11.5L12.5 7.5Z" fill="hsl(45, 100%, 50%)" />
+        <path d="M12.5 7.5L16.5 11.5" stroke="#33363F" stroke-width="1.2" />
+    </svg>
+);
+
+export const Icon = {
+    document: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M5.58579 4.58579C5 5.17157 5 6.11438 5 8V17C5 18.8856 5 19.8284 5.58579 20.4142C6.17157 21 7.11438 21 9 21H15C16.8856 21 17.8284 21 18.4142 20.4142C19 19.8284 19 18.8856 19 17V8C19 6.11438 19 5.17157 18.4142 4.58579C17.8284 4 16.8856 4 15 4H9C7.11438 4 6.17157 4 5.58579 4.58579ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H15C15.5523 10 16 9.55228 16 9C16 8.44772 15.5523 8 15 8H9ZM9 12C8.44772 12 8 12.4477 8 13C8 13.5523 8.44772 14 9 14H15C15.5523 14 16 13.5523 16 13C16 12.4477 15.5523 12 15 12H9ZM9 16C8.44772 16 8 16.4477 8 17C8 17.5523 8.44772 18 9 18H13C13.5523 18 14 17.5523 14 17C14 16.4477 13.5523 16 13 16H9Z" fill="#222222" />
+        </svg>
+    ),
+    newDocument: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M13.7586 3.00598C13.2404 3 12.6591 3 12 3C9.20435 3 7.80653 3 6.7039 3.45672C5.23373 4.06569 4.06569 5.23373 3.45672 6.7039C3 7.80653 3 9.20435 3 12V15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21H12C14.7956 21 16.1935 21 17.2961 20.5433C18.7663 19.9343 19.9343 18.7663 20.5433 17.2961C21 16.1935 21 14.7956 21 12C21 11.3409 21 10.7596 20.994 10.2414C20.464 10.7133 19.7655 11 19 11C17.3431 11 16 9.65685 16 8C14.3431 8 13 6.65685 13 5C13 4.23453 13.2867 3.53602 13.7586 3.00598ZM9 8.99966C8.44772 8.99966 8 9.44738 8 9.99966C8 10.5519 8.44772 10.9997 9 10.9997H15C15.5523 10.9997 16 10.5519 16 9.99966C16 9.44738 15.5523 8.99966 15 8.99966H9ZM9 12.9997C8.44772 12.9997 8 13.4474 8 13.9997C8 14.5519 8.44772 14.9997 9 14.9997H12C12.5523 14.9997 13 14.5519 13 13.9997C13 13.4474 12.5523 12.9997 12 12.9997H9Z" fill="#222222" />
+            <path d="M19 8L19 2M16 5H22" stroke="#222222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    ),
+    book: fastSVG(
+        // <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        //     <path d="M5 17H9C10.6569 17 12 18.3431 12 20V10C12 7.17157 12 5.75736 11.1213 4.87868C10.2426 4 8.82843 4 6 4H5C4.05719 4 3.58579 4 3.29289 4.29289C3 4.58579 3 5.05719 3 6V15C3 15.9428 3 16.4142 3.29289 16.7071C3.58579 17 4.05719 17 5 17Z" stroke="#33363F" stroke-width="2" />
+        //     <path d="M19 17H15C13.3431 17 12 18.3431 12 20V10C12 7.17157 12 5.75736 12.8787 4.87868C13.7574 4 15.1716 4 18 4H19C19.9428 4 20.4142 4 20.7071 4.29289C21 4.58579 21 5.05719 21 6V15C21 15.9428 21 16.4142 20.7071 16.7071C20.4142 17 19.9428 17 19 17Z" stroke="#33363F" stroke-width="2" />
+        // </svg>
+
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5 17H9C10.6569 17 12 18.3431 12 20V10C12 7.17157 12 5.75736 11.1213 4.87868C10.2426 4 8.82843 4 6 4H5C4.05719 4 3.58579 4 3.29289 4.29289C3 4.58579 3 5.05719 3 6V15C3 15.9428 3 16.4142 3.29289 16.7071C3.58579 17 4.05719 17 5 17Z" fill="#222222" fill-opacity="1" stroke="hsl(0, 0%, 50%)" stroke-width="1.2" />
+            <path d="M19 17H15C13.3431 17 12 18.3431 12 20V10C12 7.17157 12 5.75736 12.8787 4.87868C13.7574 4 15.1716 4 18 4H19C19.9428 4 20.4142 4 20.7071 4.29289C21 4.58579 21 5.05719 21 6V15C21 15.9428 21 16.4142 20.7071 16.7071C20.4142 17 19.9428 17 19 17Z" fill="#222222" fill-opacity="1" stroke="hsl(0, 0%, 50%)" stroke-width="1.2" />
+        </svg>
+    ),
+    documentSearch: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="17.5" cy="17.5" r="2.5" stroke="#222222" stroke-width="2" />
+            <path d="M21 21L19.5 19.5" stroke="#222222" stroke-width="2" stroke-linecap="round" />
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M4 10C4 6.22876 4 4.34315 5.17157 3.17157C6.34315 2 8.22876 2 12 2C15.7712 2 17.6569 2 18.8284 3.17157C20 4.34315 20 6.22876 20 10V13.1689C19.2646 12.7435 18.4107 12.5 17.5 12.5C14.7386 12.5 12.5 14.7386 12.5 17.5C12.5 19.4428 13.6081 21.1269 15.2268 21.9546C14.337 22 13.2765 22 12 22C8.22876 22 6.34315 22 5.17157 20.8284C4 19.6569 4 17.7712 4 14V10ZM8 5C7.44772 5 7 5.44772 7 6C7 6.55228 7.44772 7 8 7H12C12.5523 7 13 6.55228 13 6C13 5.44772 12.5523 5 12 5H8ZM8 9C7.44772 9 7 9.44772 7 10C7 10.5523 7.44772 11 8 11H14C14.5523 11 15 10.5523 15 10C15 9.44772 14.5523 9 14 9L8 9ZM8 13C7.44772 13 7 13.4477 7 14C7 14.5523 7.44772 15 8 15H11C11.5523 15 12 14.5523 12 14C12 13.4477 11.5523 13 11 13H8Z" fill="#222222" />
+        </svg>
+    ),
+    atom: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="12" cy="12" r="1" stroke="#222222" />
+            <path d="M15 12C15 14.6668 14.5658 17.035 13.9 18.6997C13.5659 19.5348 13.1932 20.1435 12.8304 20.527C12.4697 20.9085 12.1887 21 12 21C11.8113 21 11.5303 20.9085 11.1696 20.527C10.8068 20.1435 10.4341 19.5348 10.1 18.6997C9.43419 17.035 9 14.6668 9 12C9 9.33323 9.43419 6.96497 10.1 5.30032C10.4341 4.46523 10.8068 3.85653 11.1696 3.47296C11.5303 3.0915 11.8113 3 12 3C12.1887 3 12.4697 3.0915 12.8304 3.47296C13.1932 3.85653 13.5659 4.46523 13.9 5.30032C14.5658 6.96497 15 9.33323 15 12Z" stroke="#222222" stroke-width="2" />
+            <path d="M13.5 14.5981C11.1905 15.9315 8.92246 16.7396 7.14791 16.9953C6.25768 17.1236 5.54415 17.1051 5.0306 16.9827C4.51988 16.8611 4.30015 16.6635 4.2058 16.5001C4.11144 16.3366 4.0502 16.0475 4.20018 15.5444C4.35099 15.0385 4.69176 14.4113 5.24796 13.7045C6.35665 12.2955 8.19053 10.7354 10.5 9.40197C12.8095 8.06859 15.0776 7.26048 16.8521 7.00481C17.7424 6.87654 18.4559 6.895 18.9694 7.01736C19.4802 7.13905 19.6999 7.33662 19.7943 7.50005C19.8886 7.66349 19.9499 7.95255 19.7999 8.4557C19.6491 8.96163 19.3083 9.58878 18.7521 10.2956C17.6434 11.7046 15.8095 13.2647 13.5 14.5981Z" stroke="#222222" stroke-width="2" />
+            <path d="M13.5 9.40181C11.1905 8.06843 8.92246 7.26032 7.14791 7.00464C6.25768 6.87638 5.54415 6.89484 5.0306 7.0172C4.51988 7.13888 4.30015 7.33645 4.2058 7.49989C4.11144 7.66332 4.0502 7.95239 4.20018 8.45554C4.35099 8.96147 4.69176 9.58862 5.24796 10.2955C6.35665 11.7044 8.19053 13.2646 10.5 14.598C12.8095 15.9314 15.0776 16.7395 16.8521 16.9951C17.7424 17.1234 18.4559 17.1049 18.9694 16.9826C19.4802 16.8609 19.6999 16.6633 19.7943 16.4999C19.8886 16.3365 19.9499 16.0474 19.7999 15.5442C19.6491 15.0383 19.3083 14.4112 18.7521 13.7043C17.6434 12.2953 15.8095 10.7352 13.5 9.40181Z" stroke="#222222" stroke-width="2" />
+        </svg>
+
+    ),
+    widgetAdd: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="3" y="3" width="7" height="7" rx="1" stroke="#222222" stroke-width="2" stroke-linecap="round" />
+            <rect x="3" y="14" width="7" height="7" rx="1" stroke="#222222" stroke-width="2" stroke-linecap="round" />
+            <rect x="14" y="3" width="7" height="7" rx="1" stroke="#222222" stroke-width="2" stroke-linecap="round" />
+            <path d="M17.5 14.0002L17.5 21.0004" stroke="#222222" stroke-width="2" stroke-linecap="round" />
+            <path d="M21 17.5001L13.9998 17.5001" stroke="#222222" stroke-width="2" stroke-linecap="round" />
+        </svg>
+    ),
+    treeView: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M7 2V4.8C7 5.92011 7 6.48016 7.21799 6.90798C7.40973 7.28431 7.71569 7.59027 8.09202 7.78201C8.51984 8 9.0799 8 10.2 8H15" stroke="#222222" stroke-width="2" />
+            <path d="M7 5V14.8C7 15.9201 7 16.4802 7.21799 16.908C7.40973 17.2843 7.71569 17.5903 8.09202 17.782C8.51984 18 9.0799 18 10.2 18H15" stroke="#222222" stroke-width="2" />
+            <path d="M15 16.6C15 16.0399 15 15.7599 15.109 15.546C15.2049 15.3578 15.3578 15.2049 15.546 15.109C15.7599 15 16.0399 15 16.6 15H17L18 16H19.4C19.9601 16 20.2401 16 20.454 16.109C20.6422 16.2049 20.7951 16.3578 20.891 16.546C21 16.7599 21 17.0399 21 17.6V19.4C21 19.9601 21 20.2401 20.891 20.454C20.7951 20.6422 20.6422 20.7951 20.454 20.891C20.2401 21 19.9601 21 19.4 21H16.6C16.0399 21 15.7599 21 15.546 20.891C15.3578 20.7951 15.2049 20.6422 15.109 20.454C15 20.2401 15 19.9601 15 19.4V16.6Z" stroke="#222222" stroke-width="2" stroke-linejoin="round" />
+            <path d="M15 6.6C15 6.03995 15 5.75992 15.109 5.54601C15.2049 5.35785 15.3578 5.20487 15.546 5.10899C15.7599 5 16.0399 5 16.6 5H17L18 6H19.4C19.9601 6 20.2401 6 20.454 6.10899C20.6422 6.20487 20.7951 6.35785 20.891 6.54601C21 6.75992 21 7.03995 21 7.6V9.4C21 9.96005 21 10.2401 20.891 10.454C20.7951 10.6422 20.6422 10.7951 20.454 10.891C20.2401 11 19.9601 11 19.4 11H16.6C16.0399 11 15.7599 11 15.546 10.891C15.3578 10.7951 15.2049 10.6422 15.109 10.454C15 10.2401 15 9.96005 15 9.4V6.6Z" stroke="#222222" stroke-width="2" stroke-linejoin="round" />
+        </svg>
+    ),
+    hierarchy: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="18" y="9" width="4" height="4" rx="2" transform="rotate(90 18 9)" fill="#222222" stroke="#222222" stroke-width="2" />
+            <rect x="18" y="17" width="4" height="4" rx="2" transform="rotate(90 18 17)" fill="#222222" stroke="#222222" stroke-width="2" />
+            <rect x="3" y="7" width="4" height="4" rx="2" transform="rotate(-90 3 7)" fill="#222222" stroke="#222222" stroke-width="2" />
+            <path d="M5 6V15C5 16.8856 5 17.8284 5.58579 18.4142C6.17157 19 7.11438 19 9 19H14" stroke="#222222" stroke-width="2" />
+            <path d="M5 7V7C5 8.88562 5 9.82843 5.58579 10.4142C6.17157 11 7.11438 11 9 11H14" stroke="#222222" stroke-width="2" />
+        </svg>
+    ),
+    hierarchyColored: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+                <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                    {list(100).map(i =>
+                        <stop offset={`${i}%`} stop-color={`hsl(${i * 2 + 170}, 75%, 45%)`} />
+                    )}
+                </linearGradient>
+            </defs>
+            <rect x="18" y="9" width="4.5" height="4.5" rx="2" transform="rotate(90 18 9)" fill="url(#gradient)" stroke="#222222" stroke-width="1.5" />
+            <rect x="18" y="17" width="4.5" height="4.5" rx="2" transform="rotate(90 18 17)" fill="url(#gradient)" stroke="#222222" stroke-width="1.5" />
+            <rect x="3" y="7" width="4.5" height="4.5" rx="2" transform="rotate(-90 3 7)" fill="url(#gradient)" stroke="#222222" stroke-width="1.5" />
+            <path d="M5 6V15C5 16.8856 5 17.8284 5.58579 18.4142C6.17157 19 7.11438 19 9 19H13" stroke="#222222" stroke-width="3" />
+            <path d="M5 7V7C5 8.88562 5 9.82843 5.58579 10.4142C6.17157 11 7.11438 11 9 11H13" stroke="#222222" stroke-width="3" />
+            <path d="M5 6V15C5 16.8856 5 17.8284 5.58579 18.4142C6.17157 19 7.11438 19 9 19H14" stroke="url(#gradient)" stroke-width="0.5" />
+            <path d="M5 7V7C5 8.88562 5 9.82843 5.58579 10.4142C6.17157 11 7.11438 11 9 11H14" stroke="url(#gradient)" stroke-width="0.5" />
+        </svg>
+    ),
+    chevronDoubleDown: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M 18 12   l -6 6   l -6 -6" stroke="hsl(0, 0%, 70%)" />
+            <path d="M 18 6   l -6 6   l -6 -6" stroke="hsl(0, 0%, 70%)" />
+        </svg>
+    ),
+    chevronDoubleUp: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M 18 18   l -6 -6   l -6 6" stroke="hsl(0, 0%, 70%)" />
+            <path d="M 18 12   l -6 -6   l -6 6" stroke="hsl(0, 0%, 70%)" />
+        </svg>
+    ),
+    chevronDoubleRight: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M 6 18   l 6 -6   l -6 -6" stroke="hsl(0, 0%, 70%)" />
+            <path d="M 12 18   l 6 -6   l -6 -6" stroke="hsl(0, 0%, 70%)" />
+        </svg>
+    ),
+    chevronDoubleRightBright: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M 6 18   l 6 -6   l -6 -6" stroke="hsl(0, 0%, 90%)" />
+            <path d="M 12 18   l 6 -6   l -6 -6" stroke="hsl(0, 0%, 90%)" />
+        </svg>
+    ),
+    chevronDoubleLeft: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M 18 18   l -6 -6   l 6 -6" stroke="hsl(0, 0%, 70%)" />
+            <path d="M 12 18   l -6 -6   l 6 -6" stroke="hsl(0, 0%, 70%)" />
+        </svg>
+    ),
+    chevronDoubleLeftBright: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M 18 18   l -6 -6   l 6 -6" stroke="hsl(0, 0%, 90%)" />
+            <path d="M 12 18   l -6 -6   l 6 -6" stroke="hsl(0, 0%, 90%)" />
+        </svg>
+    ),
+    chevronDoubleDownBright: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M 18 12   l -6 6   l -6 -6" stroke="hsl(0, 0%, 90%)" />
+            <path d="M 18 6   l -6 6   l -6 -6" stroke="hsl(0, 0%, 90%)" />
+        </svg>
+    ),
+    chevronDoubleUpBright: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M 18 18   l -6 -6   l -6 6" stroke="hsl(0, 0%, 90%)" />
+            <path d="M 18 12   l -6 -6   l -6 6" stroke="hsl(0, 0%, 90%)" />
+        </svg>
+    ),
+
+    chevronDown: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M 18 10   l -6 6   l -6 -6" stroke="hsl(0, 0%, 70%)" />
+        </svg>
+    ),
+    chevronUp: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M 18 14   l -6 -6   l -6 6" stroke="hsl(0, 0%, 70%)" />
+        </svg>
+    ),
+    chevronRight: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M 10 18   l 6 -6   l -6 -6" stroke="hsl(0, 0%, 70%)" />
+        </svg>
+    ),
+    chevronLeft: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M 14 18   l -6 -6   l 6 -6" stroke="hsl(0, 0%, 70%)" />
+        </svg>
+    ),
+    chevronDownBright: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M 18 10   l -6 6   l -6 -6" stroke="hsl(0, 0%, 90%)" />
+        </svg>
+    ),
+    chevronUpBright: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M 18 14   l -6 -6   l -6 6" stroke="hsl(0, 0%, 90%)" />
+        </svg>
+    ),
+
+    search: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="11" cy="11" r="7" stroke="hsl(0, 0%, 90%)" stroke-width="2" />
+            <path d="M20 20L17 17" stroke="hsl(0, 0%, 90%)" stroke-width="2" stroke-linecap="round" />
+        </svg>
+    ),
+    add: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 6L12 18" stroke="hsl(0, 0%, 90%)" stroke-width="2" stroke-linecap="square" stroke-linejoin="round" />
+            <path d="M18 12L6 12" stroke="hsl(0, 0%, 90%)" stroke-width="2" stroke-linecap="square" stroke-linejoin="round" />
+        </svg>
+    ),
+    equals: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6 8L18 8" stroke="hsl(0, 0%, 90%)" stroke-width="2" />
+            <path d="M6 16L18 16" stroke="hsl(0, 0%, 90%)" stroke-width="2" />
+        </svg>
+    ),
+    add2: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M3 11C3 7.22876 3 5.34315 4.17157 4.17157C5.34315 3 7.22876 3 11 3H13C16.7712 3 18.6569 3 19.8284 4.17157C21 5.34315 21 7.22876 21 11V13C21 16.7712 21 18.6569 19.8284 19.8284C18.6569 21 16.7712 21 13 21H11C7.22876 21 5.34315 21 4.17157 19.8284C3 18.6569 3 16.7712 3 13V11Z" stroke="hsl(0, 0%, 90%)" stroke-width="2" />
+            <path d="M12 8L12 16" stroke="hsl(0, 0%, 90%)" stroke-width="2" stroke-linecap="square" stroke-linejoin="round" />
+            <path d="M16 12L8 12" stroke="hsl(0, 0%, 90%)" stroke-width="2" stroke-linecap="square" stroke-linejoin="round" />
+        </svg>
+    ),
+    close: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="12" cy="12" r="9" stroke="hsl(0, 0%, 90%)" stroke-width="2" />
+            <path d="M9.0001 14.9997L15.0001 8.99966" stroke="hsl(0, 0%, 90%)" stroke-width="2" />
+            <path d="M15 15L9 9" stroke="hsl(0, 0%, 90%)" stroke-width="2" />
+        </svg>
+    ),
+    delete: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="12" cy="12" r="8.5" fill="hsl(-5, 80%, 70%)" stroke="#222222" />
+            <path d="M18 18L6 6" stroke="#222222" />
+        </svg>
+    ),
+    checkmark: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="12" cy="12" r="9" fill="hsl(120, 60%, 70%)" stroke="#222222" stroke-width="1.2" />
+            <path d="M8 12L11 15L16 9" stroke="#222222" stroke-width="1.2" />
+        </svg>
+    ),
+    eyeball: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="12" cy="12" r="3" stroke="hsl(0, 0%, 90%)" stroke-width="2" />
+            <path d="M20.188 10.9343C20.5762 11.4056 20.7703 11.6412 20.7703 12C20.7703 12.3588 20.5762 12.5944 20.188 13.0657C18.7679 14.7899 15.6357 18 12 18C8.36427 18 5.23206 14.7899 3.81197 13.0657C3.42381 12.5944 3.22973 12.3588 3.22973 12C3.22973 11.6412 3.42381 11.4056 3.81197 10.9343C5.23206 9.21014 8.36427 6 12 6C15.6357 6 18.7679 9.21014 20.188 10.9343Z" stroke="hsl(0, 0%, 90%)" stroke-width="2" />
+        </svg>
+    ),
+    eyeballOff: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.9202 12.7988C15.9725 12.5407 16 12.2736 16 12C16 9.79086 14.2091 8 12 8C11.7264 8 11.4593 8.02746 11.2012 8.07977L15.9202 12.7988ZM8.66676 9.78799C8.24547 10.4216 8 11.1821 8 12C8 14.2091 9.79086 16 12 16C12.8179 16 13.5784 15.7545 14.212 15.3332L12.7381 13.8594C12.5098 13.9501 12.2607 14 12 14C10.8954 14 10 13.1046 10 12C10 11.7393 10.0499 11.4902 10.1406 11.2619L8.66676 9.78799Z" fill="hsl(0, 0%, 90%)" />
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.5191 17.6405L15.0499 16.1712C14.0776 16.6805 13.0477 17 12 17C10.4742 17 8.98616 16.3224 7.65914 15.3677C6.34002 14.4186 5.26409 13.2558 4.58386 12.43C4.48409 12.3088 4.40958 12.2182 4.34785 12.1385C4.29899 12.0754 4.26786 12.0315 4.24756 12C4.26786 11.9685 4.29899 11.9246 4.34785 11.8615C4.40958 11.7818 4.48409 11.6912 4.58386 11.57C5.24928 10.7622 6.29335 9.63187 7.57331 8.69463L6.14458 7.2659C4.79643 8.29616 3.72247 9.47005 3.04009 10.2985C3.01651 10.3272 2.99192 10.3566 2.96662 10.3869L2.96661 10.3869C2.65318 10.7624 2.22974 11.2696 2.22974 12C2.22974 12.7304 2.65318 13.2376 2.9666 13.6131L2.96682 13.6133C2.99205 13.6435 3.01657 13.6729 3.04009 13.7015C3.77996 14.5998 4.98018 15.9041 6.49111 16.9912C7.99416 18.0725 9.89008 19 12 19C13.67 19 15.206 18.419 16.5191 17.6405ZM8.80682 5.6855C9.79062 5.26871 10.8643 5 12 5C14.1099 5 16.0059 5.92747 17.5089 7.00885C19.0198 8.0959 20.2201 9.40025 20.9599 10.2985C20.9835 10.3272 21.0081 10.3566 21.0334 10.3869L21.0334 10.3869C21.3468 10.7624 21.7703 11.2696 21.7703 12C21.7703 12.7304 21.3468 13.2376 21.0334 13.6131C21.0081 13.6434 20.9835 13.6728 20.9599 13.7015C20.4733 14.2923 19.7874 15.0589 18.945 15.8237L17.529 14.4077C18.3089 13.708 18.9539 12.9912 19.4162 12.43C19.5159 12.3088 19.5904 12.2182 19.6522 12.1385C19.701 12.0754 19.7322 12.0315 19.7525 12C19.7322 11.9685 19.701 11.9246 19.6522 11.8615C19.5904 11.7818 19.5159 11.6912 19.4162 11.57C18.7359 10.7442 17.66 9.58138 16.3409 8.63233C15.0139 7.6776 13.5258 7 12 7C11.449 7 10.9029 7.08837 10.3676 7.24624L8.80682 5.6855Z" fill="hsl(0, 0%, 90%)" />
+            <path d="M5 2L21 18" stroke="hsl(0, 0%, 90%)" stroke-width="2" />
+        </svg>
+    ),
+    rename: rename,
+    pencil: rename,
+    dotAndLine: fastSVG(
+        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="3" y="3" width="6" height="6" rx="2" stroke="hsl(0, 0%, 15%)" stroke-width="2" />
+            <path d="M18 21L21 17L18 13" stroke="hsl(0, 0%, 15%)" stroke-width="2" />
+            {/* <path d="M21 17H10C10.2288 17 8.34315 17 7.17157 15.82843C6 14.65685 6 12.7712 6 9V15" stroke="hsl(0, 0%, 15%)" stroke-width="2" /> */}
+            <path d="M21 17H14C10.2288 17 8.34315 17 7.17157 15.82843C6 14.65685 6 12.7712 6 9V9" stroke="hsl(0, 0%, 15%)" stroke-width="2" />
+        </svg>
+    ),
+    resize: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 20L20 20L20 10" stroke="#33363F" stroke-width="2" />
+            <path d="M12 17L17 17L17 12" stroke="#33363F" stroke-width="2" />
+        </svg>
+    ),
+    fireFlame: fastSVG(
+        <svg height="800px" width="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+            <path style="fill:#FFB446;" d="M97.103,353.103C97.103,440.86,168.244,512,256,512l0,0c87.756,0,158.897-71.14,158.897-158.897
+	c0-88.276-44.138-158.897-14.524-220.69c0,0-47.27,8.828-73.752,79.448c0,0-88.276-88.276-51.394-211.862
+	c0,0-89.847,35.31-80.451,150.069c8.058,98.406-9.396,114.759-9.396,114.759c0-79.448-62.115-114.759-62.115-114.759
+	C141.241,247.172,97.103,273.655,97.103,353.103z"/>
+            <path style="fill:#FFDC64;" d="M370.696,390.734c0,66.093-51.033,122.516-117.114,121.241
+	c-62.188-1.198-108.457-48.514-103.512-110.321c2.207-27.586,23.172-72.276,57.379-117.517l22.805,13.793
+	C229.517,242.023,256,167.724,256,167.724C273.396,246.007,370.696,266.298,370.696,390.734z"/>
+            <path style="fill:#FFFFFF;" d="M211.862,335.448c-8.828,52.966-26.483,72.249-26.483,105.931C185.379,476.69,216.998,512,256,512
+	l0,0c39.284,0,70.729-32.097,70.62-71.381c-0.295-105.508-61.792-158.136-61.792-158.136c8.828,52.966-17.655,79.448-17.655,79.448
+	C236.141,345.385,211.862,335.448,211.862,335.448z"/>
+        </svg>
+    ),
+    lock: fastSVG(
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" width="28px" height="28px">
+            <path d="M 15 2 C 11.145666 2 8 5.1456661 8 9 L 8 11 L 6 11 C 4.895 11 4 11.895 4 13 L 4 25 C 4 26.105 4.895 27 6 27 L 24 27 C 25.105 27 26 26.105 26 25 L 26 13 C 26 11.895 25.105 11 24 11 L 22 11 L 22 9 C 22 5.2715823 19.036581 2.2685653 15.355469 2.0722656 A 1.0001 1.0001 0 0 0 15 2 z M 15 4 C 17.773666 4 20 6.2263339 20 9 L 20 11 L 10 11 L 10 9 C 10 6.2263339 12.226334 4 15 4 z" fill="hsl(0, 0%, 15%)" />
+        </svg>
+    ),
+    paper: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M18 3.00001V3.00001C19.6569 3.00001 21 4.34315 21 6.00001L21 8.14286C21 8.47698 21 8.64405 20.9234 8.76602C20.8834 8.82962 20.8296 8.8834 20.766 8.92336C20.644 9 20.477 9 20.1429 9L15 9M18 3.00001V3.00001C16.3431 3.00001 15 4.34315 15 6.00001L15 9M18 3.00001L7 3.00001C5.11438 3.00001 4.17157 3.00001 3.58579 3.58579C3 4.17158 3 5.11439 3 7.00001L3 21L6 20L9 21L12 20L15 21L15 9" stroke={"hsl(0, 0%, 90%)"} stroke-width="2" />
+            <path d="M7 7L11 7" stroke={"hsl(0, 0%, 90%)"} stroke-width="2" stroke-linecap="round" />
+            <path d="M8 11H7" stroke={"hsl(0, 0%, 90%)"} stroke-width="2" stroke-linecap="round" />
+            <path d="M7 15L10 15" stroke={"hsl(0, 0%, 90%)"} stroke-width="2" stroke-linecap="round" />
+        </svg>
+    ),
+    open: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14 4H20M20 4V10M20 4L12 12" stroke="#33363F" stroke-width="2" />
+            <path d="M11 5H7C5.89543 5 5 5.89543 5 7V17C5 18.1046 5.89543 19 7 19H17C18.1046 19 19 18.1046 19 17V13" stroke="#33363F" stroke-width="2" stroke-linecap="round" />
+        </svg>
+    ),
+
+    rotateCW: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14 15L10 19L14 23" stroke={"hsl(0, 0%, 90%)"} stroke-width="2" />
+            <path d="M5.93782 15.5C5.16735 14.1655 4.85875 12.6141 5.05989 11.0863C5.26102 9.55856 5.96064 8.13986 7.05025 7.05025C8.13986 5.96064 9.55856 5.26102 11.0863 5.05989C12.6141 4.85875 14.1655 5.16735 15.5 5.93782C16.8345 6.70829 17.8775 7.89757 18.4672 9.32122C19.0568 10.7449 19.1603 12.3233 18.7615 13.8117C18.3627 15.3002 17.4838 16.6154 16.2613 17.5535C15.0388 18.4915 13.5409 19 12 19" stroke={"hsl(0, 0%, 90%)"} stroke-width="2" stroke-linecap="round" />
+        </svg>
+    ),
+    rotateCCW: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g transform={"scale(-1, 1) translate(-24, 0)"}>
+                <path d="M14 15L10 19L14 23" stroke={"hsl(0, 0%, 90%)"} stroke-width="2" />
+                <path d="M5.93782 15.5C5.16735 14.1655 4.85875 12.6141 5.05989 11.0863C5.26102 9.55856 5.96064 8.13986 7.05025 7.05025C8.13986 5.96064 9.55856 5.26102 11.0863 5.05989C12.6141 4.85875 14.1655 5.16735 15.5 5.93782C16.8345 6.70829 17.8775 7.89757 18.4672 9.32122C19.0568 10.7449 19.1603 12.3233 18.7615 13.8117C18.3627 15.3002 17.4838 16.6154 16.2613 17.5535C15.0388 18.4915 13.5409 19 12 19" stroke={"hsl(0, 0%, 90%)"} stroke-width="2" stroke-linecap="round" />
+            </g>
+        </svg>
+    ),
+    loadingSymbol: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 2V6M12 18V22M4.93 4.93L7.76 7.76M16.24 16.24L19.07 19.07M2 12H6M18 12H22M4.93 19.07L7.76 16.24M16.24 7.76L19.07 4.93" stroke="#33363F" stroke-width="2" stroke-linecap="round" />
+        </svg>
+    ),
+
+    flip: fastSVG(
+        <svg width="24" height="24" viewBox="0 -1 38 37" xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="M32.2,7.9v20.2c0,2.1-1.7,3.8-3.8,3.8h-13c-2.1,0-3.8-1.7-3.8-3.8v-3.3l2.8,0.6V28c0,0.6,0.5,1.1,1.1,1.1h12.8   c0.6,0,1.1-0.5,1.1-1.1V8.1c0-0.6-0.5-1.1-1.1-1.1H15.5c-0.6,0-1.1,0.5-1.1,1.1v7.5l-2.8-0.2v-2.5c-5.6,2.6-4.3,3.9-1.2,4.6   c0.4,0.1,0.8,0.2,1.2,0.2c0.9,0.1,1.9,0.2,2.8,0.3c0.6,0.1,1.2,0.1,1.8,0.1c2,0.1,3.5,0.1,3.5,0.1v-3.1c0-0.5,0.6-0.4,0.8-0.2   l5.8,4l2.3,1.6c0.2,0.2,0.2,0.5,0,0.8l-2.3,1.6l-2.8,2l-2.9,2c-0.1,0.1-0.3,0.2-0.4,0.2c-0.1,0-0.4,0-0.4-0.3v-2.5   c-1.5-0.3-2.9-0.5-4.2-0.8c-0.4-0.1-0.7-0.2-1.1-0.2c-1-0.2-2-0.5-2.8-0.7c-0.7-0.2-1.3-0.4-1.9-0.6c-14.4-5.1,1.9-11.1,1.9-11.1   V7.9c0-2.1,1.7-3.8,3.8-3.8h13C30.5,4.1,32.2,5.8,32.2,7.9z"
+                stroke="hsl(0, 0%, 90%)"
+                fill="hsl(0, 0%, 90%)"
+            />
+        </svg>
+    ),
+
+    leftArrow: fastSVG(
+        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 200 200" version="1.1">
+            <rect x="10" y="10" width="180" height="180" rx="15" ry="15" style="fill:#EFEFEF;stroke:#B0B0B0;stroke-width:3" />
+            <rect x="80" y="90" width="50" height="20" style="fill:#404040;" />
+            <polygon points="80,70 50,100 80,130" style="fill:#404040;" />
+        </svg>
+    ),
+    rightArrow: fastSVG(
+        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 200 200" version="1.1">
+            <rect x="10" y="10" width="180" height="180" rx="15" ry="15" style="fill:#EFEFEF;stroke:#B0B0B0;stroke-width:3" />
+            <rect x="70" y="90" width="50" height="20" style="fill:#404040;" />
+            <polygon points="120,70 150,100 120,130" style="fill:#404040;" />
+        </svg>
+    ),
+
+    move: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 3L12.7295 2.31606L12 1.53789L11.2705 2.31606L12 3ZM11 9C11 9.55228 11.4477 10 12 10C12.5523 10 13 9.55228 13 9H11ZM15.7295 5.51606L12.7295 2.31606L11.2705 3.68394L14.2705 6.88394L15.7295 5.51606ZM11.2705 2.31606L8.27046 5.51606L9.72954 6.88394L12.7295 3.68394L11.2705 2.31606ZM11 3V9H13V3H11Z" fill="white" />
+            <path d="M21 12L21.6839 12.7295L22.4621 12L21.6839 11.2705L21 12ZM15 11C14.4477 11 14 11.4477 14 12C14 12.5523 14.4477 13 15 13L15 11ZM18.4839 15.7295L21.6839 12.7295L20.3161 11.2705L17.1161 14.2705L18.4839 15.7295ZM21.6839 11.2705L18.4839 8.27046L17.1161 9.72954L20.3161 12.7295L21.6839 11.2705ZM21 11L15 11L15 13L21 13L21 11Z" fill="white" />
+            <path d="M12 21L12.7295 21.6839L12 22.4621L11.2705 21.6839L12 21ZM11 15C11 14.4477 11.4477 14 12 14C12.5523 14 13 14.4477 13 15H11ZM15.7295 18.4839L12.7295 21.6839L11.2705 20.3161L14.2705 17.1161L15.7295 18.4839ZM11.2705 21.6839L8.27046 18.4839L9.72954 17.1161L12.7295 20.3161L11.2705 21.6839ZM11 21V15H13V21H11Z" fill="white" />
+            <path d="M3 12L2.31606 12.7295L1.53789 12L2.31606 11.2705L3 12ZM9 11C9.55228 11 10 11.4477 10 12C10 12.5523 9.55228 13 9 13L9 11ZM5.51606 15.7295L2.31606 12.7295L3.68394 11.2705L6.88394 14.2705L5.51606 15.7295ZM2.31606 11.2705L5.51606 8.27046L6.88394 9.72954L3.68394 12.7295L2.31606 11.2705ZM3 11L9 11L9 13L3 13L3 11Z" fill="white" />
+        </svg>
+    ),
+
+    resize2: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M4 4V3H3V4H4ZM11.2929 12.7071C11.6834 13.0976 12.3166 13.0976 12.7071 12.7071C13.0976 12.3166 13.0976 11.6834 12.7071 11.2929L11.2929 12.7071ZM5 10V4H3V10H5ZM4 5H10V3H4V5ZM3.29289 4.70711L11.2929 12.7071L12.7071 11.2929L4.70711 3.29289L3.29289 4.70711Z" fill="white" />
+            <path d="M4 20V21H3V20H4ZM11.2929 11.2929C11.6834 10.9024 12.3166 10.9024 12.7071 11.2929C13.0976 11.6834 13.0976 12.3166 12.7071 12.7071L11.2929 11.2929ZM5 14V20H3V14H5ZM4 19H10V21H4V19ZM3.29289 19.2929L11.2929 11.2929L12.7071 12.7071L4.70711 20.7071L3.29289 19.2929Z" fill="white" />
+            <path d="M20 4V3H21V4H20ZM12.7071 12.7071C12.3166 13.0976 11.6834 13.0976 11.2929 12.7071C10.9024 12.3166 10.9024 11.6834 11.2929 11.2929L12.7071 12.7071ZM19 10V4H21V10H19ZM20 5H14V3H20V5ZM20.7071 4.70711L12.7071 12.7071L11.2929 11.2929L19.2929 3.29289L20.7071 4.70711Z" fill="white" />
+            <path d="M20 20V21H21V20H20ZM12.7071 11.2929C12.3166 10.9024 11.6834 10.9024 11.2929 11.2929C10.9024 11.6834 10.9024 12.3166 11.2929 12.7071L12.7071 11.2929ZM19 14V20H21V14H19ZM20 19H14V21H20V19ZM20.7071 19.2929L12.7071 11.2929L11.2929 12.7071L19.2929 20.7071L20.7071 19.2929Z" fill="white" />
+        </svg>
+
+    ),
+
+    paintBrushAndPalette: fastSVG(
+        <svg width="40" xmlns="http://www.w3.org/2000/svg" viewBox="0 10 325 310">
+            <defs>
+                <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                    {list(100).map(i =>
+                        <stop offset={`${i}%`} stop-color={`hsl(${i * 2 + 170}, 75%, 45%)`} />
+                    )}
+                </linearGradient>
+            </defs>
+            <g >
+                <path d="M117.866,234.088c-2.956,14.532-4.875,21.558-16.092,22.458c-2.764,0.222-5.015,2.308-5.446,5.047
+                    c-0.432,2.738,1.069,5.416,3.631,6.477c0.721,0.298,17.877,7.308,37.921,7.309c0.003,0,0.005,0,0.007,0
+                    c13.968,0,25.95-3.386,35.612-10.063c11.45-7.912,19.344-20.294,23.541-36.788l-38.572-38.88
+                    C125.871,194.924,121.253,217.436,117.866,234.088z" fill="hsl(0, 0%, 30%)" />
+                <path d="M322.745,63.336c-1.037-1.046-2.887-2.293-5.806-2.293c-3.423,0-12.516,0-67.74,46.992
+                    c-25.509,21.706-54.92,48.559-78.314,71.41l36.603,36.894c24.061-25.009,52.129-56.355,74.451-83.258
+                    c14.096-16.986,24.935-31.002,32.216-41.657C323.799,77.311,328.023,68.655,322.745,63.336z" fill="hsl(0, 0%, 30%)" />
+                <path d="M182.595,278.479c-12.387,8.56-27.429,12.899-44.716,12.899c-22.753-0.001-41.919-7.649-44.046-8.527
+                    c-9.425-3.906-14.898-13.673-13.31-23.749c1.555-9.871,9.463-17.373,19.341-18.446c0.861-2.571,1.813-7.254,2.323-9.758
+                    c1.878-9.23,4.449-21.873,12.358-33.126c8.637-12.287,21.656-20.165,38.751-23.466c9.811-9.737,21.005-20.443,32.686-31.308
+                    c-5.905-1.281-11.185-5.127-14.017-10.944c-4.875-10.02-0.623-22.073,9.484-26.895c10.133-4.834,22.287-0.612,27.155,9.423
+                    c0.961,1.978,1.555,4.033,1.832,6.096c9.688-8.677,19.309-17.099,28.392-24.828c0.054-0.046,0.105-0.09,0.16-0.136
+                    c-10.209-19.536-24.849-36.845-42.687-50.098c-25.614-19.031-56.114-29.096-88.2-29.104c-0.01,0-0.017,0-0.025,0
+                    c-21.654,0-47.976,7.566-68.697,19.749C13.981,51.193-0.005,71.163,0,92.49c0.008,25.748,14.53,36.518,26.199,45.171
+                    c9.515,7.057,17.03,12.63,17.034,24.844c0.003,12.213-7.508,17.781-17.018,24.831c-11.665,8.648-26.184,19.412-26.176,45.163
+                    c0.006,21.324,14.001,41.299,39.406,56.244c20.736,12.198,47.072,19.78,68.73,19.786c0.015,0,0.028,0,0.042,0
+                    c39.305,0,76.254-15.171,104.044-42.72c20.837-20.655,34.656-46.416,40.273-74.442c-13.952,15.471-27.997,30.493-40.563,43.322
+                    C206.641,253.965,196.773,268.682,182.595,278.479z M111.054,77.103c2.498-10.871,13.4-17.657,24.354-15.167
+                    c10.939,2.478,17.793,13.282,15.313,24.138c-2.499,10.844-13.407,17.631-24.362,15.154
+                    C115.411,98.764,108.554,87.947,111.054,77.103z M45.054,114.152c-7.005-8.716-5.565-21.401,3.216-28.339
+                    c8.78-6.925,21.571-5.505,28.589,3.195c6.99,8.703,5.545,21.388-3.229,28.34C64.869,124.288,52.058,122.853,45.054,114.152z
+                    M55.746,247.168c-8.786-6.944-10.231-19.629-3.226-28.342c7-8.696,19.796-10.122,28.581-3.18
+                    c8.778,6.943,10.224,19.629,3.225,28.327C77.327,252.686,64.53,254.111,55.746,247.168z" fill="hsl(0, 0%, 30%)" />
+            </g>
+        </svg>
+    ),
+    paintBrushAndPaletteAlt: fastSVG(
+        <svg width="40" xmlns="http://www.w3.org/2000/svg" viewBox="0 10 325 310">
+            <defs>
+                <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                    {list(100).map(i =>
+                        <stop offset={`${i}%`} stop-color={`hsl(${i * 2 + 170}, 75%, 45%)`} />
+                    )}
+                </linearGradient>
+            </defs>
+            <g >
+                <path d="M117.866,234.088c-2.956,14.532-4.875,21.558-16.092,22.458c-2.764,0.222-5.015,2.308-5.446,5.047
+                    c-0.432,2.738,1.069,5.416,3.631,6.477c0.721,0.298,17.877,7.308,37.921,7.309c0.003,0,0.005,0,0.007,0
+                    c13.968,0,25.95-3.386,35.612-10.063c11.45-7.912,19.344-20.294,23.541-36.788l-38.572-38.88
+                    C125.871,194.924,121.253,217.436,117.866,234.088z" fill="#222222" />
+                <path d="M322.745,63.336c-1.037-1.046-2.887-2.293-5.806-2.293c-3.423,0-12.516,0-67.74,46.992
+                    c-25.509,21.706-54.92,48.559-78.314,71.41l36.603,36.894c24.061-25.009,52.129-56.355,74.451-83.258
+                    c14.096-16.986,24.935-31.002,32.216-41.657C323.799,77.311,328.023,68.655,322.745,63.336z" fill="#222222" />
+                <path d="M182.595,278.479c-12.387,8.56-27.429,12.899-44.716,12.899c-22.753-0.001-41.919-7.649-44.046-8.527
+                    c-9.425-3.906-14.898-13.673-13.31-23.749c1.555-9.871,9.463-17.373,19.341-18.446c0.861-2.571,1.813-7.254,2.323-9.758
+                    c1.878-9.23,4.449-21.873,12.358-33.126c8.637-12.287,21.656-20.165,38.751-23.466c9.811-9.737,21.005-20.443,32.686-31.308
+                    c-5.905-1.281-11.185-5.127-14.017-10.944c-4.875-10.02-0.623-22.073,9.484-26.895c10.133-4.834,22.287-0.612,27.155,9.423
+                    c0.961,1.978,1.555,4.033,1.832,6.096c9.688-8.677,19.309-17.099,28.392-24.828c0.054-0.046,0.105-0.09,0.16-0.136
+                    c-10.209-19.536-24.849-36.845-42.687-50.098c-25.614-19.031-56.114-29.096-88.2-29.104c-0.01,0-0.017,0-0.025,0
+                    c-21.654,0-47.976,7.566-68.697,19.749C13.981,51.193-0.005,71.163,0,92.49c0.008,25.748,14.53,36.518,26.199,45.171
+                    c9.515,7.057,17.03,12.63,17.034,24.844c0.003,12.213-7.508,17.781-17.018,24.831c-11.665,8.648-26.184,19.412-26.176,45.163
+                    c0.006,21.324,14.001,41.299,39.406,56.244c20.736,12.198,47.072,19.78,68.73,19.786c0.015,0,0.028,0,0.042,0
+                    c39.305,0,76.254-15.171,104.044-42.72c20.837-20.655,34.656-46.416,40.273-74.442c-13.952,15.471-27.997,30.493-40.563,43.322
+                    C206.641,253.965,196.773,268.682,182.595,278.479z M111.054,77.103c2.498-10.871,13.4-17.657,24.354-15.167
+                    c10.939,2.478,17.793,13.282,15.313,24.138c-2.499,10.844-13.407,17.631-24.362,15.154
+                    C115.411,98.764,108.554,87.947,111.054,77.103z M45.054,114.152c-7.005-8.716-5.565-21.401,3.216-28.339
+                    c8.78-6.925,21.571-5.505,28.589,3.195c6.99,8.703,5.545,21.388-3.229,28.34C64.869,124.288,52.058,122.853,45.054,114.152z
+                    M55.746,247.168c-8.786-6.944-10.231-19.629-3.226-28.342c7-8.696,19.796-10.122,28.581-3.18
+                    c8.778,6.943,10.224,19.629,3.225,28.327C77.327,252.686,64.53,254.111,55.746,247.168z" fill="#222222" />
+            </g>
+        </svg>
+    ),
+    paintBrushAndPaletteColored: fastSVG(
+        <svg width="40" xmlns="http://www.w3.org/2000/svg" viewBox="0 10 325 310">
+            <defs>
+                <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                    {list(100).map(i =>
+                        <stop offset={`${i}%`} stop-color={`hsl(${i * 2 + 170}, 75%, 45%)`} />
+                    )}
+                </linearGradient>
+            </defs>
+            <g >
+                <path d="M117.866,234.088c-2.956,14.532-4.875,21.558-16.092,22.458c-2.764,0.222-5.015,2.308-5.446,5.047
+                    c-0.432,2.738,1.069,5.416,3.631,6.477c0.721,0.298,17.877,7.308,37.921,7.309c0.003,0,0.005,0,0.007,0
+                    c13.968,0,25.95-3.386,35.612-10.063c11.45-7.912,19.344-20.294,23.541-36.788l-38.572-38.88
+                    C125.871,194.924,121.253,217.436,117.866,234.088z" fill="url(#gradient)" />
+                <path d="M322.745,63.336c-1.037-1.046-2.887-2.293-5.806-2.293c-3.423,0-12.516,0-67.74,46.992
+                    c-25.509,21.706-54.92,48.559-78.314,71.41l36.603,36.894c24.061-25.009,52.129-56.355,74.451-83.258
+                    c14.096-16.986,24.935-31.002,32.216-41.657C323.799,77.311,328.023,68.655,322.745,63.336z" fill="url(#gradient)" />
+                <path d="M182.595,278.479c-12.387,8.56-27.429,12.899-44.716,12.899c-22.753-0.001-41.919-7.649-44.046-8.527
+                    c-9.425-3.906-14.898-13.673-13.31-23.749c1.555-9.871,9.463-17.373,19.341-18.446c0.861-2.571,1.813-7.254,2.323-9.758
+                    c1.878-9.23,4.449-21.873,12.358-33.126c8.637-12.287,21.656-20.165,38.751-23.466c9.811-9.737,21.005-20.443,32.686-31.308
+                    c-5.905-1.281-11.185-5.127-14.017-10.944c-4.875-10.02-0.623-22.073,9.484-26.895c10.133-4.834,22.287-0.612,27.155,9.423
+                    c0.961,1.978,1.555,4.033,1.832,6.096c9.688-8.677,19.309-17.099,28.392-24.828c0.054-0.046,0.105-0.09,0.16-0.136
+                    c-10.209-19.536-24.849-36.845-42.687-50.098c-25.614-19.031-56.114-29.096-88.2-29.104c-0.01,0-0.017,0-0.025,0
+                    c-21.654,0-47.976,7.566-68.697,19.749C13.981,51.193-0.005,71.163,0,92.49c0.008,25.748,14.53,36.518,26.199,45.171
+                    c9.515,7.057,17.03,12.63,17.034,24.844c0.003,12.213-7.508,17.781-17.018,24.831c-11.665,8.648-26.184,19.412-26.176,45.163
+                    c0.006,21.324,14.001,41.299,39.406,56.244c20.736,12.198,47.072,19.78,68.73,19.786c0.015,0,0.028,0,0.042,0
+                    c39.305,0,76.254-15.171,104.044-42.72c20.837-20.655,34.656-46.416,40.273-74.442c-13.952,15.471-27.997,30.493-40.563,43.322
+                    C206.641,253.965,196.773,268.682,182.595,278.479z M111.054,77.103c2.498-10.871,13.4-17.657,24.354-15.167
+                    c10.939,2.478,17.793,13.282,15.313,24.138c-2.499,10.844-13.407,17.631-24.362,15.154
+                    C115.411,98.764,108.554,87.947,111.054,77.103z M45.054,114.152c-7.005-8.716-5.565-21.401,3.216-28.339
+                    c8.78-6.925,21.571-5.505,28.589,3.195c6.99,8.703,5.545,21.388-3.229,28.34C64.869,124.288,52.058,122.853,45.054,114.152z
+                    M55.746,247.168c-8.786-6.944-10.231-19.629-3.226-28.342c7-8.696,19.796-10.122,28.581-3.18
+                    c8.778,6.943,10.224,19.629,3.225,28.327C77.327,252.686,64.53,254.111,55.746,247.168z" fill="url(#gradient)" />
+            </g>
+        </svg>
+    ),
+
+    personRunning: fastSVG(
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0.263929 0.295" fill="#222222">
+            <path d="M0.185777 0.0554559c0.00539362,-0.000125982 0.0100235,0.00339759 0.0115313,0.0083109l0.0156494 0.0506646c0.00451568,0.0146966 -0.0180037,0.0216178 -0.0225193,0.00692116l-0.0130116 -0.0421372 -0.035594 0.000889751 0.0150273 0.0871168 0.0273264 0.0492197 0.0659754 0.00287791c0.0191966,0.000826759 0.0179328,0.0302436 -0.0012677,0.0294169l-0.0742115 -0.00324011c-0.00493693,-0.000216532 -0.00964946,-0.00291728 -0.0122282,-0.00755107l-0.0277082 -0.0499087 -0.059444 0.031594 -0.00397238 0.0616644c-0.00120077,0.0191966 -0.0306216,0.0173501 -0.0294169,-0.00184643l0.00445269 -0.0691013c4.33064e-005,-0.00524402 0.00288185,-0.0102991 0.00783847,-0.0129329l0.0549401 -0.0292004 -0.0127872 -0.0741367 -0.0260311 0.0248579c-0.00382278,0.00363774 -0.00945655,0.00420072 -0.0138384,0.00176769l-0.0498851 -0.0239445c-0.0138541,-0.00662589 -0.00370467,-0.0278539 0.0101495,-0.021228l0.0431962 0.020732 0.0344877 -0.0327082c0.0057007,-0.0038464 0.0260784,-0.00647234 0.0340428,-0.00666132l0.0572984 -0.00143699z" />
+            <path d="M0.108376 0c-0.0137006,0 -0.0248107,0.0111101 -0.0248107,0.0248107 0,0.0137006 0.0111101,0.0248107 0.0248107,0.0248107 0.0137006,0 0.0248107,-0.0111101 0.0248107,-0.0248107 0,-0.0137006 -0.0111101,-0.0248107 -0.0248107,-0.0248107z" />
+        </svg>
+    ),
+    personRunningColored: fastSVG(
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0.263929 0.295" fill="url(#gradient)">
+            <defs>
+                <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                    {list(100).map(i =>
+                        <stop offset={`${i}%`} stop-color={`hsl(${i * 2 + 170}, 75%, 45%)`} />
+                    )}
+                </linearGradient>
+            </defs>
+            <path d="M0.185777 0.0554559c0.00539362,-0.000125982 0.0100235,0.00339759 0.0115313,0.0083109l0.0156494 0.0506646c0.00451568,0.0146966 -0.0180037,0.0216178 -0.0225193,0.00692116l-0.0130116 -0.0421372 -0.035594 0.000889751 0.0150273 0.0871168 0.0273264 0.0492197 0.0659754 0.00287791c0.0191966,0.000826759 0.0179328,0.0302436 -0.0012677,0.0294169l-0.0742115 -0.00324011c-0.00493693,-0.000216532 -0.00964946,-0.00291728 -0.0122282,-0.00755107l-0.0277082 -0.0499087 -0.059444 0.031594 -0.00397238 0.0616644c-0.00120077,0.0191966 -0.0306216,0.0173501 -0.0294169,-0.00184643l0.00445269 -0.0691013c4.33064e-005,-0.00524402 0.00288185,-0.0102991 0.00783847,-0.0129329l0.0549401 -0.0292004 -0.0127872 -0.0741367 -0.0260311 0.0248579c-0.00382278,0.00363774 -0.00945655,0.00420072 -0.0138384,0.00176769l-0.0498851 -0.0239445c-0.0138541,-0.00662589 -0.00370467,-0.0278539 0.0101495,-0.021228l0.0431962 0.020732 0.0344877 -0.0327082c0.0057007,-0.0038464 0.0260784,-0.00647234 0.0340428,-0.00666132l0.0572984 -0.00143699z" />
+            <path d="M0.108376 0c-0.0137006,0 -0.0248107,0.0111101 -0.0248107,0.0248107 0,0.0137006 0.0111101,0.0248107 0.0248107,0.0248107 0.0137006,0 0.0248107,-0.0111101 0.0248107,-0.0248107 0,-0.0137006 -0.0111101,-0.0248107 -0.0248107,-0.0248107z" />
+        </svg>
+    ),
+    tpose: fastSVG(
+        <svg width="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" stroke-width={5} stroke="black">
+            {/* Stick person t posing */}
+            <circle cx="50" cy="10" r="7" />
+            <path d="M50 19 l0 52" />
+            <path d="M50 27 l-25 16" />
+            <path d="M50 27 l25 16" />
+            <path d="M50 71 l-27 22" />
+            <path d="M50 71 l27 22" />
+        </svg>
+    ),
+    faceIcon: fastSVG(
+        <svg fill="#000000" xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 485 485">
+            <g>
+                <path d="M413.974,71.026C368.171,25.225,307.274,0,242.5,0S116.829,25.225,71.026,71.026C25.225,116.829,0,177.726,0,242.5
+		s25.225,125.671,71.026,171.474C116.829,459.775,177.726,485,242.5,485s125.671-25.225,171.474-71.026
+		C459.775,368.171,485,307.274,485,242.5S459.775,116.829,413.974,71.026z M242.5,455C125.327,455,30,359.673,30,242.5
+		S125.327,30,242.5,30S455,125.327,455,242.5S359.673,455,242.5,455z"/>
+                <path d="M318.514,231.486c19.299,0,35-15.701,35-35s-15.701-35-35-35s-35,15.701-35,35S299.215,231.486,318.514,231.486z" />
+                <path d="M166.486,231.486c19.299,0,35-15.701,35-35s-15.701-35-35-35s-35,15.701-35,35S147.188,231.486,166.486,231.486z" />
+                <path d="M242.5,355c-46.911,0-89.35-29.619-105.604-73.703l-28.148,10.378C129.329,347.496,183.08,385,242.5,385
+		s113.171-37.504,133.752-93.325l-28.148-10.378C331.85,325.381,289.411,355,242.5,355z"/>
+            </g>
+        </svg>
+    ),
+
+    cursor: fastSVG(
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 20 24">
+            <path d="M4 0l16 12.279-6.951 1.17 4.325 8.817-3.596 1.734-4.35-8.879-5.428 4.702z" />
+        </svg>
+    ),
+    pointer: fastSVG(
+        <svg fill="#222222" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 203.079 203.079">
+            <path d="M192.231,104.082V102c0-12.407-10.094-22.5-22.5-22.5c-2.802,0-5.484,0.519-7.961,1.459
+	C159.665,70.722,150.583,63,139.731,63c-2.947,0-5.76,0.575-8.341,1.61C128.667,55.162,119.624,48,109.231,48
+	c-2.798,0-5.496,0.541-8,1.516V22.5c0-12.407-10.094-22.5-22.5-22.5s-22.5,10.093-22.5,22.5v66.259
+	c-3.938-5.029-8.673-9.412-14.169-11.671c-6.133-2.52-12.587-2.219-18.667,0.872c-11.182,5.686-15.792,19.389-10.277,30.548
+	l27.95,56.563c0.79,1.552,19.731,38.008,54.023,38.008h40c31.54,0,57.199-25.794,57.199-57.506l-0.031-41.491H192.231z
+	 M135.092,188.079h-40c-24.702,0-40.091-28.738-40.646-29.796l-27.88-56.42c-1.924-3.893-0.33-8.519,3.629-10.532
+	c2.182-1.11,4.081-1.223,6.158-0.372c8.281,3.395,16.41,19.756,19.586,29.265l2.41,7.259l12.883-4.559V22.5
+	c0-4.136,3.364-7.5,7.5-7.5s7.5,3.364,7.5,7.5V109h0.136h14.864h0.136V71c0-4.187,3.748-8,7.864-8c4.262,0,8,3.505,8,7.5v15v26h15
+	v-26c0-4.136,3.364-7.5,7.5-7.5s7.5,3.364,7.5,7.5V102v16.5h15V102c0-4.136,3.364-7.5,7.5-7.5s7.5,3.364,7.5,7.5v10.727h0.035
+	l0.025,32.852C177.291,169.014,158.36,188.079,135.092,188.079z"/>
+        </svg>
+    ),
+    layers: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M11.1056 3.44721L5.78885 6.10557C5.00831 6.49585 4.61803 6.69098 4.61803 7C4.61803 7.30902 5.00831 7.50415 5.78885 7.89443L11.1056 10.5528C11.5445 10.7722 11.7639 10.882 12 10.882C12.2361 10.882 12.4555 10.7722 12.8944 10.5528L18.2111 7.89443C18.9917 7.50415 19.382 7.30902 19.382 7C19.382 6.69098 18.9917 6.49585 18.2111 6.10557L12.8944 3.44721C12.4555 3.22776 12.2361 3.11803 12 3.11803C11.7639 3.11803 11.5445 3.22776 11.1056 3.44721Z" fill="#222222" />
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.02217 10.4893C7.62603 10.8135 8.33716 11.169 9.15554 11.5782L10.2113 12.1061C11.0891 12.545 11.528 12.7644 12.0001 12.7644C12.4723 12.7644 12.9112 12.545 13.789 12.1061L14.8447 11.5782C15.6631 11.169 16.3742 10.8135 16.9781 10.4893L18.2113 11.1059C18.9918 11.4961 19.3821 11.6913 19.3821 12.0003C19.3821 12.3093 18.9918 12.5044 18.2113 12.8947L12.8946 15.5531C12.4557 15.7725 12.2362 15.8822 12.0001 15.8822C11.7641 15.8822 11.5446 15.7725 11.1057 15.5531L11.1057 15.5531L5.78898 12.8947C5.00844 12.5044 4.61816 12.3093 4.61816 12.0003C4.61816 11.6913 5.00844 11.4961 5.78898 11.1059L7.02217 10.4893Z" fill="#222222" />
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.02169 15.4893C7.62567 15.8135 8.33696 16.1692 9.15557 16.5785L10.2113 17.1063C11.0891 17.5452 11.528 17.7647 12.0001 17.7647C12.4723 17.7647 12.9112 17.5452 13.789 17.1063L14.8447 16.5785C15.6633 16.1692 16.3746 15.8135 16.9786 15.4893L18.2113 16.1056C18.9918 16.4959 19.3821 16.691 19.3821 17C19.3821 17.3091 18.9918 17.5042 18.2113 17.8945L12.8946 20.5528C12.4557 20.7723 12.2362 20.882 12.0001 20.882C11.7641 20.882 11.5446 20.7723 11.1057 20.5528L11.1057 20.5528L5.78898 17.8945C5.00844 17.5042 4.61816 17.3091 4.61816 17C4.61816 16.691 5.00844 16.4959 5.78898 16.1056L7.02169 15.4893Z" fill="#222222" />
+        </svg>
+    ),
+
+    zoomInMagnifyingGlass: fastSVG(
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+            <circle cx="40" cy="40" r="35" fill="transparent" stroke-width={8} stroke={"#222222"} />
+            <path d="M40,20 L40,60" stroke="#222222" stroke-width={10} />
+            <path d="M20,40 L60,40" stroke="#222222" stroke-width={10} />
+            <path d="M67,67 L90,90" stroke="#222222" stroke-width={8} />
+        </svg>
+    ),
+    zoomOutMagnifyingGlass: fastSVG(
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+            <circle cx="40" cy="40" r="35" fill="transparent" stroke-width={8} stroke={"#222222"} />
+            <path d="M20,40 L60,40" stroke="#222222" stroke-width={8} />
+            <path d="M67,67 L90,90" stroke="#222222" stroke-width={8} />
+        </svg>
+    ),
+    zoomOutMagnifyingGlassColored: fastSVG(
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+            <defs>
+                <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                    {list(101).map(i =>
+                        <stop offset={`${i}%`} stop-color={`hsl(${i * 2 + 170}, 75%, 45%)`} />
+                    )}
+                </linearGradient>
+            </defs>
+            <circle cx="40" cy="40" r="35" fill="transparent" stroke-width={8} stroke={"url(#gradient)"} />
+            <path d="M20,40 L60,40.01" stroke="url(#gradient)" stroke-width={8} />
+            <path d="M67,67 L90,90" stroke="url(#gradient)" stroke-width={8} />
+        </svg>
+    ),
+    zoomInMagnifyingGlassColored: fastSVG(
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+            <defs>
+                <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                    {list(101).map(i =>
+                        <stop offset={`${i}%`} stop-color={`hsl(${i * 2 + 170}, 75%, 45%)`} />
+                    )}
+                </linearGradient>
+            </defs>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+                <circle cx="40" cy="40" r="35" fill="transparent" stroke-width={8} stroke={"url(#gradient)"} />
+                <path d="M40,20 L40.01,60" stroke="url(#gradient)" stroke-width={10} />
+                <path d="M20,40 L60,40.01" stroke="url(#gradient)" stroke-width={10} />
+                <path d="M67,67 L90,90" stroke="url(#gradient)" stroke-width={8} />
+            </svg>
+        </svg>
+    ),
+    clone: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14 7V7C14 6.06812 14 5.60218 13.8478 5.23463C13.6448 4.74458 13.2554 4.35523 12.7654 4.15224C12.3978 4 11.9319 4 11 4H8C6.11438 4 5.17157 4 4.58579 4.58579C4 5.17157 4 6.11438 4 8V11C4 11.9319 4 12.3978 4.15224 12.7654C4.35523 13.2554 4.74458 13.6448 5.23463 13.8478C5.60218 14 6.06812 14 7 14V14" stroke={"#222222"} stroke-width="2" />
+            <rect x="10" y="10" width="10" height="10" rx="2" stroke={"#222222"} stroke-width="2" />
+        </svg>
+    ),
+
+    fastSpeed: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10.3156 19.1064L10.903 15.5822C10.948 15.3119 10.9705 15.1768 10.8956 15.0884C10.8207 15 10.6838 15 10.4098 15H8C7.56366 15 7.34549 15 7.27639 14.8618C7.20729 14.7236 7.3382 14.5491 7.6 14.2L9.4 11.8C9.6618 11.4509 9.79271 11.2764 9.72361 11.1382C9.65451 11 9.43634 11 9 11H6.80902C6.44642 11 6.26512 11 6.19185 10.8814C6.11857 10.7629 6.19965 10.6007 6.3618 10.2764L9.8618 3.27639C9.92904 3.14191 9.96266 3.07467 10.0231 3.03734C10.0835 3 10.1587 3 10.309 3H15.191C15.5536 3 15.7349 3 15.8082 3.11857C15.8814 3.23713 15.8004 3.39929 15.6382 3.72361L14.3618 6.27639C14.1996 6.60071 14.1186 6.76287 14.1918 6.88143C14.2651 7 14.4464 7 14.809 7H15.7929C16.3066 7 16.5635 7 16.6274 7.15433C16.6913 7.30866 16.5097 7.49029 16.1464 7.85355L13.8536 10.1464C13.4903 10.5097 13.3087 10.6913 13.3726 10.8457C13.4365 11 13.6934 11 14.2071 11H16.9597C17.4113 11 17.6371 11 17.7052 11.1417C17.7733 11.2834 17.6322 11.4597 17.3501 11.8123L11.1992 19.501C10.719 20.1012 10.4789 20.4014 10.3025 20.3226C10.126 20.2438 10.1892 19.8647 10.3156 19.1064Z" stroke="#33363F" stroke-width="2" />
+        </svg>
+    ),
+    normalSpeed: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <mask id="mask0_1654_8697" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="3" width="18" height="18">
+                <path d="M3 11C3 7.22876 3 5.34315 4.17157 4.17157C5.34315 3 7.22876 3 11 3H13C16.7712 3 18.6569 3 19.8284 4.17157C21 5.34315 21 7.22876 21 11V13C21 16.7712 21 18.6569 19.8284 19.8284C18.6569 21 16.7712 21 13 21H11C7.22876 21 5.34315 21 4.17157 19.8284C3 18.6569 3 16.7712 3 13V11Z" fill="#273B4A" />
+            </mask>
+            <g mask="url(#mask0_1654_8697)">
+                <path d="M5.40989 12.5901L5.25713 12.7429C4.27646 13.7235 3.78613 14.2139 3.49264 14.8158C3.39066 15.025 3.30712 15.2427 3.24299 15.4664C3.05843 16.1102 3.09488 16.8027 3.16777 18.1877L3.5 24.5H21V19.7573C21 18.3059 21 17.5802 20.7614 16.9207C20.6962 16.7404 20.6181 16.565 20.5277 16.3959C20.1971 15.7774 19.6577 15.2919 18.5789 14.321L18.3643 14.1279C17.4682 13.3214 17.0202 12.9182 16.5078 12.8039C16.1864 12.7322 15.8523 12.741 15.5352 12.8295C15.0295 12.9705 14.6033 13.3967 13.7508 14.2492C13.1184 14.8816 12.8023 15.1977 12.4625 15.2406C12.2519 15.2672 12.0383 15.226 11.8526 15.1231C11.5531 14.9572 11.3742 14.5399 11.0166 13.7053C10.2559 11.9304 9.87554 11.0429 9.22167 10.7151C8.89249 10.5501 8.52413 10.4792 8.1572 10.5101C7.42836 10.5716 6.75554 11.2445 5.40989 12.5901L5.40989 12.5901Z" fill="#7E869E" fill-opacity="0.25" stroke="#222222" />
+            </g>
+            <path d="M3 11C3 7.22876 3 5.34315 4.17157 4.17157C5.34315 3 7.22876 3 11 3H13C16.7712 3 18.6569 3 19.8284 4.17157C21 5.34315 21 7.22876 21 11V13C21 16.7712 21 18.6569 19.8284 19.8284C18.6569 21 16.7712 21 13 21H11C7.22876 21 5.34315 21 4.17157 19.8284C3 18.6569 3 16.7712 3 13V11Z" stroke="#222222" stroke-width="1.2" />
+            <circle cx="16.5" cy="7.5" r="1.5" fill="#222222" />
+        </svg>
+    ),
+    refinedSpeed: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6 21L5.81092 17.9747C5.37149 10.9438 10.9554 5 18 5V5L16.7827 5.97387C14.3918 7.88656 13 10.7824 13 13.8442V13.8442C13 15.9831 11.0278 17.5774 8.93642 17.1292L6 16.5" stroke="#33363F" stroke-width="2" />
+        </svg>
+    ),
+    bothWays: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 17H9V19.5885C9 19.7554 8.80766 19.8489 8.67644 19.7458L2 14.5L8.67644 9.25423C8.80766 9.15112 9 9.24461 9 9.41149V12H15" stroke="#33363F" stroke-width="2" />
+            <path d="M11 7H15V4.41149C15 4.24461 15.1923 4.15112 15.3236 4.25423L22 9.5L15.3236 14.7458C15.1923 14.8489 15 14.7554 15 14.5885V12H9" stroke="#33363F" stroke-width="2" />
+        </svg>
+    ),
+    join: fastSVG(
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M15 15V14H14V15H15ZM20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L20.2929 21.7071ZM15 9H14V10H15V9ZM21.7071 3.70711C22.0976 3.31658 22.0976 2.68342 21.7071 2.29289C21.3166 1.90237 20.6834 1.90237 20.2929 2.29289L21.7071 3.70711ZM9 15H10V14H9V15ZM2.29289 20.2929C1.90237 20.6834 1.90237 21.3166 2.29289 21.7071C2.68342 22.0976 3.31658 22.0976 3.70711 21.7071L2.29289 20.2929ZM9 9V10H10V9H9ZM3.70711 2.29289C3.31658 1.90237 2.68342 1.90237 2.29289 2.29289C1.90237 2.68342 1.90237 3.31658 2.29289 3.70711L3.70711 2.29289ZM16 20V15H14V20H16ZM15 16H20V14H15V16ZM14.2929 15.7071L20.2929 21.7071L21.7071 20.2929L15.7071 14.2929L14.2929 15.7071ZM14 4V9H16V4H14ZM15 10H20V8H15V10ZM15.7071 9.70711L21.7071 3.70711L20.2929 2.29289L14.2929 8.29289L15.7071 9.70711ZM10 20V15H8V20H10ZM9 14H4V16H9V14ZM8.29289 14.2929L2.29289 20.2929L3.70711 21.7071L9.70711 15.7071L8.29289 14.2929ZM8 4V9H10V4H8ZM9 8H4V10H9V8ZM9.70711 8.29289L3.70711 2.29289L2.29289 3.70711L8.29289 9.70711L9.70711 8.29289Z" fill="#33363F" />
+        </svg>
+
+    )
+};