Experiment with virtualization and Framer Motion

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock

package.json

@@ -12,6 +12,7 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-list": "^0.8.5",
     "@types/react-virtualized": "^9.21.10",
+    "framer-motion": "^2.1.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-list": "^0.8.15",

src/assets/6-square.svg

@@ -5,7 +5,7 @@
         <g id="REFACTOR---Testing-32-line-style-MEDIUM---REFACTOR" transform="translate(-204.000000, -836.000000)">
             <g id="ph-6-square" transform="translate(204.000000, 836.000000)">
                 <polygon id="Fill-1" points="0 16 16 16 16 0 0 0"></polygon>
-                <path d="M12.5002,2 C13.3283424,2 14.0002,2.67185763 14.0002,3.5 L14.0002,3.5 L14.0002,12.5 C14.0002,13.3281424 13.3283424,14 12.5002,14 L12.5002,14 L3.5002,14 C2.67205763,14 2.0002,13.3281424 2.0002,12.5 L2.0002,12.5 L2.0002,3.5 C2.0002,2.67185763 2.67205763,2 3.5002,2 L3.5002,2 Z M12.5002,3 L3.5002,3 C3.22434237,3 3.0002,3.22414237 3.0002,3.5 L3.0002,3.5 L3.0002,12.5 C3.0002,12.7758576 3.22434237,13 3.5002,13 L3.5002,13 L12.5002,13 C12.7760576,13 13.0002,12.7758576 13.0002,12.5 L13.0002,12.5 L13.0002,3.5 C13.0002,3.22414237 12.7760576,3 12.5002,3 L12.5002,3 Z M8.68254638,4.56645635 C8.89513608,4.68915997 8.98352787,4.94440165 8.90359492,5.16757927 L8.86564365,5.24944638 L7.85282188,7.00392446 C8.29007993,6.97474335 8.73199934,7.0740957 9.12489386,7.30008038 L9.12489386,7.30008038 L9.29386898,7.40805384 C9.72888544,7.71376231 10.0373271,8.15855494 10.1734941,8.66683399 C10.3268496,9.23795093 10.2504388,9.85092548 9.94876178,10.3742416 C9.64716392,10.8973449 9.15475538,11.2690252 8.58226601,11.4223941 C8.0101937,11.5760061 7.39807854,11.5000007 6.87630614,11.1979196 C6.35246877,10.8966194 5.98037525,10.4044519 5.82663095,9.83188663 C5.67314747,9.25896983 5.74909436,8.64698709 6.05188686,8.12398186 C6.05369059,8.12086632 6.05550102,8.11775614 6.05731812,8.11465133 L7.99955635,4.74955362 C8.13759792,4.51039021 8.44338298,4.42841477 8.68254638,4.56645635 Z M8.62630614,8.16691962 C8.33337246,7.99843033 7.99451471,7.95640146 7.67522247,8.04267312 C7.35874418,8.12692081 7.08639562,8.33296658 6.91731314,8.62501814 C6.74908295,8.91559756 6.7070847,9.25402094 6.79249411,9.57283399 C6.87803784,9.89141061 7.08390359,10.1637089 7.37611814,10.3317869 C7.66663056,10.4999783 8.00495914,10.541988 8.32321337,10.456531 C8.64237347,10.3710285 8.91492409,10.1653016 9.08243822,9.8747584 C9.25053333,9.58320754 9.29287479,9.24334675 9.20763095,8.92588663 C9.12225886,8.60721321 8.91666229,8.33502286 8.62630614,8.16691962 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"></path>
+                <path d="M12.5002,2 C13.3283424,2 14.0002,2.67185763 14.0002,3.5 L14.0002,3.5 L14.0002,12.5 C14.0002,13.3281424 13.3283424,14 12.5002,14 L12.5002,14 L3.5002,14 C2.67205763,14 2.0002,13.3281424 2.0002,12.5 L2.0002,12.5 L2.0002,3.5 C2.0002,2.67185763 2.67205763,2 3.5002,2 L3.5002,2 Z M12.5002,3 L3.5002,3 C3.22434237,3 3.0002,3.22414237 3.0002,3.5 L3.0002,3.5 L3.0002,12.5 C3.0002,12.7758576 3.22434237,13 3.5002,13 L3.5002,13 L12.5002,13 C12.7760576,13 13.0002,12.7758576 13.0002,12.5 L13.0002,12.5 L13.0002,3.5 C13.0002,3.22414237 12.7760576,3 12.5002,3 L12.5002,3 Z M8.68254638,4.56645635 C8.89513608,4.68915997 8.98352787,4.94440165 8.90359492,5.16757927 L8.86564365,5.24944638 L7.85282188,7.00392446 C8.29007993,6.97474335 8.73199934,7.0740957 9.12489386,7.30008038 L9.12489386,7.30008038 L9.29386898,7.40805384 C9.72888544,7.71376231 10.0373271,8.15855494 10.1734941,8.66683399 C10.3268496,9.23795093 10.2504388,9.85092548 9.94876178,10.3742416 C9.64716392,10.8973449 9.15475538,11.2690252 8.58226601,11.4223941 C8.0101937,11.5760061 7.39807854,11.5000007 6.87630614,11.1979196 C6.35246877,10.8966194 5.98037525,10.4044519 5.82663095,9.83188663 C5.67314747,9.25896983 5.74909436,8.64698709 6.05188686,8.12398186 C6.05369059,8.12086632 6.05550102,8.11775614 6.05731812,8.11465133 L7.99955635,4.74955362 C8.13759792,4.51039021 8.44338298,4.42841477 8.68254638,4.56645635 Z M8.62630614,8.16691962 C8.33337246,7.99843033 7.99451471,7.95640146 7.67522247,8.04267312 C7.35874418,8.12692081 7.08639562,8.33296658 6.91731314,8.62501814 C6.74908295,8.91559756 6.7070847,9.25402094 6.79249411,9.57283399 C6.87803784,9.89141061 7.08390359,10.1637089 7.37611814,10.3317869 C7.66663056,10.4999783 8.00495914,10.541988 8.32321337,10.456531 C8.64237347,10.3710285 8.91492409,10.1653016 9.08243822,9.8747584 C9.25053333,9.58320754 9.29287479,9.24334675 9.20763095,8.92588663 C9.12225886,8.60721321 8.91666229,8.33502286 8.62630614,8.16691962 Z" id="Combined-Shape" fill="currentColor" fill-rule="nonzero"></path>
             </g>
         </g>
     </g>

src/assets/basketball.svg

@@ -5,7 +5,7 @@
         <g id="REFACTOR---Testing-32-line-style-MEDIUM---REFACTOR" transform="translate(-204.000000, -964.000000)">
             <g id="ph-basketball" transform="translate(204.000000, 964.000000)">
                 <polygon id="Fill-1" points="0 16 16 16 16 0 0 0"></polygon>
-                <path d="M8,1.5 C11.5891424,1.5 14.5,4.41085763 14.5,8 C14.5,11.5891424 11.5891424,14.5 8,14.5 C4.41085763,14.5 1.5,11.5891424 1.5,8 C1.5,4.41085763 4.41085763,1.5 8,1.5 Z M9.55429959,8.97337801 L9.43006779,9.01211926 C7.55413659,9.63360544 5.89350932,10.7965274 4.65824297,12.3685077 C5.58519969,13.0783317 6.74349235,13.5 8,13.5 C8.55752955,13.5 9.09572236,13.4169812 9.60288719,13.2626348 L9.54459967,13.5349582 C9.71885259,12.7827664 9.8077,12.0125167 9.8077,11.2308 C9.8077,10.4598876 9.7208522,9.70369736 9.55429959,8.97337801 Z M12.615,8.4998 C11.9011889,8.4998 11.1998057,8.57431359 10.5197587,8.71772674 C10.7096591,9.53064447 10.8077,10.372458 10.8077,11.2308 C10.8077,11.7569603 10.771006,12.2785803 10.6985033,12.7938125 C12.2228482,11.9337973 13.2972372,10.3656975 13.474231,8.53565603 C13.1908789,8.5117738 12.904485,8.4998 12.615,8.4998 Z M8.53481559,6.31385229 L8.30976713,6.42932039 C6.80578057,7.17311443 5.12810107,7.5773 3.3848,7.5773 C3.09774178,7.5773 2.80916805,7.56593678 2.51936805,7.54357193 C2.50630333,7.69421609 2.5,7.84637396 2.5,8 C2.5,9.41958746 3.03822636,10.7138112 3.92168529,11.6896775 C5.30923882,9.94726976 7.17714181,8.66971052 9.28220581,8.00905679 C9.08586195,7.42042833 8.83494892,6.85312466 8.53481559,6.31385229 Z M11.6534716,3.88919624 L11.5305119,4.02522995 C10.8930519,4.71168827 10.1766098,5.3107253 9.39926428,5.81153823 C9.74373251,6.427144 10.0296512,7.07703302 10.251823,7.75231069 C11.018093,7.58622782 11.8093777,7.4998 12.615,7.4998 C12.9064349,7.4998 13.1953573,7.51088026 13.4813268,7.53303173 C13.359305,6.08792917 12.6776579,4.80014903 11.6534716,3.88919624 Z M5.62569395,3.03773938 C4.2010023,3.72087066 3.1158356,4.9995388 2.69300906,6.5509286 C2.92557773,6.56934145 3.15589619,6.5773 3.3848,6.5773 C5.0248187,6.5773 6.60053646,6.18455619 8.00395415,5.46362181 C7.36790733,4.54709997 6.57831577,3.73420945 5.66000664,3.06259033 Z M8,2.5 C7.56982598,2.5 7.15116357,2.54942299 6.74938295,2.64289878 C7.56906561,3.31612676 8.28200963,4.09717987 8.87204727,4.95992236 C9.5932694,4.49525283 10.2568148,3.93566899 10.8451518,3.29334793 C10.0141842,2.78930955 9.04078507,2.5 8,2.5 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"></path>
+                <path d="M8,1.5 C11.5891424,1.5 14.5,4.41085763 14.5,8 C14.5,11.5891424 11.5891424,14.5 8,14.5 C4.41085763,14.5 1.5,11.5891424 1.5,8 C1.5,4.41085763 4.41085763,1.5 8,1.5 Z M9.55429959,8.97337801 L9.43006779,9.01211926 C7.55413659,9.63360544 5.89350932,10.7965274 4.65824297,12.3685077 C5.58519969,13.0783317 6.74349235,13.5 8,13.5 C8.55752955,13.5 9.09572236,13.4169812 9.60288719,13.2626348 L9.54459967,13.5349582 C9.71885259,12.7827664 9.8077,12.0125167 9.8077,11.2308 C9.8077,10.4598876 9.7208522,9.70369736 9.55429959,8.97337801 Z M12.615,8.4998 C11.9011889,8.4998 11.1998057,8.57431359 10.5197587,8.71772674 C10.7096591,9.53064447 10.8077,10.372458 10.8077,11.2308 C10.8077,11.7569603 10.771006,12.2785803 10.6985033,12.7938125 C12.2228482,11.9337973 13.2972372,10.3656975 13.474231,8.53565603 C13.1908789,8.5117738 12.904485,8.4998 12.615,8.4998 Z M8.53481559,6.31385229 L8.30976713,6.42932039 C6.80578057,7.17311443 5.12810107,7.5773 3.3848,7.5773 C3.09774178,7.5773 2.80916805,7.56593678 2.51936805,7.54357193 C2.50630333,7.69421609 2.5,7.84637396 2.5,8 C2.5,9.41958746 3.03822636,10.7138112 3.92168529,11.6896775 C5.30923882,9.94726976 7.17714181,8.66971052 9.28220581,8.00905679 C9.08586195,7.42042833 8.83494892,6.85312466 8.53481559,6.31385229 Z M11.6534716,3.88919624 L11.5305119,4.02522995 C10.8930519,4.71168827 10.1766098,5.3107253 9.39926428,5.81153823 C9.74373251,6.427144 10.0296512,7.07703302 10.251823,7.75231069 C11.018093,7.58622782 11.8093777,7.4998 12.615,7.4998 C12.9064349,7.4998 13.1953573,7.51088026 13.4813268,7.53303173 C13.359305,6.08792917 12.6776579,4.80014903 11.6534716,3.88919624 Z M5.62569395,3.03773938 C4.2010023,3.72087066 3.1158356,4.9995388 2.69300906,6.5509286 C2.92557773,6.56934145 3.15589619,6.5773 3.3848,6.5773 C5.0248187,6.5773 6.60053646,6.18455619 8.00395415,5.46362181 C7.36790733,4.54709997 6.57831577,3.73420945 5.66000664,3.06259033 Z M8,2.5 C7.56982598,2.5 7.15116357,2.54942299 6.74938295,2.64289878 C7.56906561,3.31612676 8.28200963,4.09717987 8.87204727,4.95992236 C9.5932694,4.49525283 10.2568148,3.93566899 10.8451518,3.29334793 C10.0141842,2.78930955 9.04078507,2.5 8,2.5 Z" id="Combined-Shape" fill="currentColor" fill-rule="nonzero"></path>
             </g>
         </g>
     </g>

src/components/IconGrid/IconGrid.css

@@ -4,17 +4,17 @@
 }
 
 .grid-item {
-  margin: 4px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-color: aquamarine;
+  margin: 4px;
-  filter: grayscale(100%);
+  border-radius: 8px;
-  transition: filter 0.5s ease;
+  background-color: gainsboro;
+  /* transition: background-color 0.5s ease; */
 }
 
 .grid-item:hover {
-  filter: grayscale(0%);
+  /* background-color: aquamarine; */
-  transition: 0.5s ease;
+  /* transition: background-color 0.5s ease; */
 }

src/components/IconGrid/IconGrid.tsx

@@ -1,6 +1,6 @@
-import React, { useRef, useCallback, useMemo } from "react";
+import React from "react";
 import { useRecoilValue } from "recoil";
-import { useVirtual } from "react-virtual";
+import { motion } from "framer-motion";
 
 import { filteredQueryResultsSelector } from "../../state/selectors";
 import { iconColorAtom, iconSizeAtom } from "../../state/atoms";
@@ -8,94 +8,70 @@ import "./IconGrid.css";
 
 type IconGridProps = {};
 
-const COLUMN_COUNT = 5;
+// const variants = {
+//   open: { opacity: 1, x: 0 },
+//   closed: { opacity: 0, x: "-100%" },
+// }
 
 const IconGrid: React.FC<IconGridProps> = () => {
-  const parentRef = useRef<HTMLDivElement>(null);
   const color = useRecoilValue(iconColorAtom);
   const size = useRecoilValue(iconSizeAtom);
   const filteredQueryResults = useRecoilValue(filteredQueryResultsSelector);
-  // const categorizedQueryResults = useRecoilValue(categorizedQueryResultsSelector);
-  // console.log(categorizedQueryResults);
-
-  // const rowVirtualizer = useVirtual({
-  //   size: useMemo(() => Math.ceil(filteredQueryResults.length / COLUMN_COUNT), [
-  //     filteredQueryResults,
-  //   ]),
-  //   parentRef,
-  //   estimateSize: useCallback(() => 220 * COLUMN_COUNT, []),
-  // });
-
-  const rowVirtualizer = useVirtual({
-    size: useMemo(() => Math.ceil(filteredQueryResults.length / COLUMN_COUNT), [
-      filteredQueryResults,
-    ]),
-    parentRef,
-    estimateSize: useCallback(() => 240, []),
-    overscan: 5,
-  });
-
-  const columnVirtualizer = useVirtual({
-    horizontal: true,
-    size: COLUMN_COUNT,
-    parentRef,
-    estimateSize: useCallback(() => 160, []),
-  });
 
   return (
-    <>
+    <motion.div className="grid">
-      <div ref={parentRef} style={{ height: "90vh", width: "100%", overflowY: "auto" }}>
+      {filteredQueryResults.map((icon) => (
-        <div
+        <motion.div
-          style={{
+          key={`ph-${icon.name}-${icon.style}`}
-            height: `${rowVirtualizer.totalSize}px`,
+          className="grid-item"
-            // width: `${columnVirtualizer.totalSize}px`,
+          whileHover={{ scale: 1.2, zIndex: 1, backgroundColor: "rgb(80, 220, 240)" }}
-            // height: `${rowVirtualizer.totalSize}px`,
+          transition={{ duration: 0.2 }}
-            width: "100%",
-            position: "relative",
-          }}
-          className="grid"
         >
-          {rowVirtualizer.virtualItems.map((virtualRow) => (
+          {/* <img
-            <React.Fragment key={virtualRow.index}>
+            color={color}
-              {columnVirtualizer.virtualItems.map((virtualColumn) => (
+            style={{ height: size, width: size }}
-                <div
+            src={icon.asset}
-                  key={virtualColumn.index}
+            alt={`${icon.name} icon`}
-                  style={{
+            width="100%"
-                    position: "absolute",
+          /> */}
-                    top: 0,
+          <svg
-                    left: 0,
+            width={size}
-                    width: `${virtualColumn.size}px`,
+            height={size}
-                    height: `${virtualRow.size}px`,
+            viewBox="0 0 16 16"
-                    transform: `translateX(${virtualColumn.start}px) translateY(${virtualRow.start}px)`,
+            version="1.1"
-                  }}
+            xmlns="http://www.w3.org/2000/svg"
-                  className="grid-item"
+          >
+            <title>ph-6-square</title>
+            <g
+              id="Page-1"
+              stroke="none"
+              strokeWidth="1"
+              fill="none"
+              fillRule="evenodd"
+            >
+              <g
+                id="REFACTOR---Testing-32-line-style-MEDIUM---REFACTOR"
+                transform="translate(-204.000000, -836.000000)"
+              >
+                <g
+                  id="ph-6-square"
+                  transform="translate(204.000000, 836.000000)"
                 >
-                  {(function () {
+                  <polygon id="Fill-1" points="0 16 16 16 16 0 0 0"></polygon>
-                    const icon =
+                  <path
-                      filteredQueryResults[
+                    d="M12.5002,2 C13.3283424,2 14.0002,2.67185763 14.0002,3.5 L14.0002,3.5 L14.0002,12.5 C14.0002,13.3281424 13.3283424,14 12.5002,14 L12.5002,14 L3.5002,14 C2.67205763,14 2.0002,13.3281424 2.0002,12.5 L2.0002,12.5 L2.0002,3.5 C2.0002,2.67185763 2.67205763,2 3.5002,2 L3.5002,2 Z M12.5002,3 L3.5002,3 C3.22434237,3 3.0002,3.22414237 3.0002,3.5 L3.0002,3.5 L3.0002,12.5 C3.0002,12.7758576 3.22434237,13 3.5002,13 L3.5002,13 L12.5002,13 C12.7760576,13 13.0002,12.7758576 13.0002,12.5 L13.0002,12.5 L13.0002,3.5 C13.0002,3.22414237 12.7760576,3 12.5002,3 L12.5002,3 Z M8.68254638,4.56645635 C8.89513608,4.68915997 8.98352787,4.94440165 8.90359492,5.16757927 L8.86564365,5.24944638 L7.85282188,7.00392446 C8.29007993,6.97474335 8.73199934,7.0740957 9.12489386,7.30008038 L9.12489386,7.30008038 L9.29386898,7.40805384 C9.72888544,7.71376231 10.0373271,8.15855494 10.1734941,8.66683399 C10.3268496,9.23795093 10.2504388,9.85092548 9.94876178,10.3742416 C9.64716392,10.8973449 9.15475538,11.2690252 8.58226601,11.4223941 C8.0101937,11.5760061 7.39807854,11.5000007 6.87630614,11.1979196 C6.35246877,10.8966194 5.98037525,10.4044519 5.82663095,9.83188663 C5.67314747,9.25896983 5.74909436,8.64698709 6.05188686,8.12398186 C6.05369059,8.12086632 6.05550102,8.11775614 6.05731812,8.11465133 L7.99955635,4.74955362 C8.13759792,4.51039021 8.44338298,4.42841477 8.68254638,4.56645635 Z M8.62630614,8.16691962 C8.33337246,7.99843033 7.99451471,7.95640146 7.67522247,8.04267312 C7.35874418,8.12692081 7.08639562,8.33296658 6.91731314,8.62501814 C6.74908295,8.91559756 6.7070847,9.25402094 6.79249411,9.57283399 C6.87803784,9.89141061 7.08390359,10.1637089 7.37611814,10.3317869 C7.66663056,10.4999783 8.00495914,10.541988 8.32321337,10.456531 C8.64237347,10.3710285 8.91492409,10.1653016 9.08243822,9.8747584 C9.25053333,9.58320754 9.29287479,9.24334675 9.20763095,8.92588663 C9.12225886,8.60721321 8.91666229,8.33502286 8.62630614,8.16691962 Z"
-                        virtualRow.index * COLUMN_COUNT + virtualColumn.index
+                    id="Combined-Shape"
-                      ];
+                    fill={color}
-                      if (!icon) return null;
+                    fillRule="nonzero"
-                     return (
+                  ></path>
-                       <>
+                </g>
-                        <img
+              </g>
-                          color={color}
+            </g>
-                          style={{ height: size, width: size }}
+          </svg>
-                          src={icon.asset}
+          <p style={{ padding: 16 }}>{icon.name}</p>
-                          alt={`${icon.name} icon`}
+        </motion.div>
-                          width="100%"
+      ))}
-                        />
+    </motion.div>
-                        <p style={{ padding: 16 }}>{icon.name}</p>
-                        </>
-                    );
-                  })()}
-                </div>
-              ))}
-            </React.Fragment>
-          ))}
-        </div>
-      </div>
-    </>
   );
 };
 

src/components/IconGrid/IconGridRL.tsx

@@ -14,7 +14,7 @@ const IconGridRL: React.FC<IconGridProps> = () => {
     const icon = filteredQueryResults[index];
     return (
       <div key={key} className="grid-item" style={{ width: 120}}>
-        <img src={icon.asset} alt={`${icon.name} icon`} width="100%" />
+        {/* <img src={icon.asset} alt={`${icon.name} icon`} width="100%" /> */}
         <div style={{ padding: 16 }}>{icon.name}</div>
       </div>
     );

src/components/IconGrid/IconGridUV.css

@@ -0,0 +1,20 @@
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+}
+
+.grid-item {
+  margin: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: aquamarine;
+  filter: grayscale(100%);
+  transition: filter 0.5s ease;
+}
+
+.grid-item:hover {
+  filter: grayscale(0%);
+  transition: 0.5s ease;
+}

src/components/IconGrid/IconGridUV.tsx

@@ -0,0 +1,102 @@
+import React, { useRef, useCallback, useMemo } from "react";
+import { useRecoilValue } from "recoil";
+import { useVirtual } from "react-virtual";
+
+import { filteredQueryResultsSelector } from "../../state/selectors";
+// import { iconColorAtom, iconSizeAtom } from "../../state/atoms";
+// import "./IconGridUV.css";
+
+type IconGridProps = {};
+
+const COLUMN_COUNT = 5;
+
+const IconGrid: React.FC<IconGridProps> = () => {
+  const parentRef = useRef<HTMLDivElement>(null);
+  // const color = useRecoilValue(iconColorAtom);
+  // const size = useRecoilValue(iconSizeAtom);
+  const filteredQueryResults = useRecoilValue(filteredQueryResultsSelector);
+  // const categorizedQueryResults = useRecoilValue(categorizedQueryResultsSelector);
+  // console.log(categorizedQueryResults);
+
+  // const rowVirtualizer = useVirtual({
+  //   size: useMemo(() => Math.ceil(filteredQueryResults.length / COLUMN_COUNT), [
+  //     filteredQueryResults,
+  //   ]),
+  //   parentRef,
+  //   estimateSize: useCallback(() => 220 * COLUMN_COUNT, []),
+  // });
+
+  const rowVirtualizer = useVirtual({
+    size: useMemo(() => Math.ceil(filteredQueryResults.length / COLUMN_COUNT), [
+      filteredQueryResults,
+    ]),
+    parentRef,
+    estimateSize: useCallback(() => 240, []),
+    overscan: 5,
+  });
+
+  const columnVirtualizer = useVirtual({
+    horizontal: true,
+    size: COLUMN_COUNT,
+    parentRef,
+    estimateSize: useCallback(() => 160, []),
+  });
+
+  return (
+    <>
+      <div ref={parentRef} style={{ height: "90vh", width: "100%", overflowY: "auto" }}>
+        <div
+          style={{
+            height: `${rowVirtualizer.totalSize}px`,
+            // width: `${columnVirtualizer.totalSize}px`,
+            // height: `${rowVirtualizer.totalSize}px`,
+            width: "100%",
+            position: "relative",
+          }}
+          className="grid"
+        >
+          {rowVirtualizer.virtualItems.map((virtualRow) => (
+            <React.Fragment key={virtualRow.index}>
+              {columnVirtualizer.virtualItems.map((virtualColumn) => (
+                <div
+                  key={virtualColumn.index}
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: `${virtualColumn.size}px`,
+                    height: `${virtualRow.size}px`,
+                    transform: `translateX(${virtualColumn.start}px) translateY(${virtualRow.start}px)`,
+                  }}
+                  className="grid-item"
+                >
+                  {(function () {
+                    const icon =
+                      filteredQueryResults[
+                        virtualRow.index * COLUMN_COUNT + virtualColumn.index
+                      ];
+                      if (!icon) return null;
+                     return (
+                       <>
+                        {/* <img
+                          color={color}
+                          style={{ height: size, width: size }}
+                          src={icon.asset}
+                          alt={`${icon.name} icon`}
+                          width="100%"
+                        /> */}
+                        <p style={{ padding: 16 }}>{icon.name}</p>
+                        </>
+                    );
+                  })()}
+                </div>
+              ))}
+            </React.Fragment>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default IconGrid;

src/components/Toolbar/Toolbar.tsx

@@ -34,7 +34,7 @@ const Toolbar: React.FC<ToolbarProps> = () => {
   }
 
   return (
-    <>
+    <div style={{ position: "sticky", top: 0, padding: 8, backgroundColor: "white", zIndex: 1.1 }}>
       <input value={query} onChange={handleSearchChange} />
       <select value={style?.toString()} onChange={handleStyleChange}>
         <option value={""}>All</option>
@@ -47,7 +47,7 @@ const Toolbar: React.FC<ToolbarProps> = () => {
       </select>
       <input value={size} type="range" min={12} max={256} onChange={handleSizeChange}/>
       <input type="color" onChange={handleColorChange}/>
-    </>
+    </div>
   );
 }
 

src/components/index.ts

@@ -1,3 +1,4 @@
 export { default as App } from "./App/App";
 export { default as IconGrid } from "./IconGrid/IconGrid";
+export { default as IconGridUV } from "./IconGrid/IconGridUV";
 export { default as Toolbar } from "./Toolbar/Toolbar";

src/lib/Icon.ts

@@ -31,5 +31,5 @@ export interface Icon {
   style: IconStyle;
   categories: IconCategory[];
   tags: string[];
-  asset: string;
+  asset: React.FC<React.SVGProps<SVGSVGElement>>;
 }