andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Experiment with virtualization and Framer Motion

Browse Source
This commit is contained in:
Tobias Fried
2020-07-19 17:51:35 -04:00
parent e1dfe6aed1
commit 016e6d987b
13 changed files with 195 additions and 11154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

1
package.json
View File

@@ -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",

2
src/assets/6-square.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

2
src/assets/basketball.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

12
src/components/IconGrid/IconGrid.css
View File

@@ -4,17 +4,17 @@
}
.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;
margin: 4px;
border-radius: 8px;
background-color: gainsboro;
/* transition: background-color 0.5s ease; */
}
.grid-item:hover {
filter: grayscale(0%);
transition: 0.5s ease;
/* background-color: aquamarine; */
/* transition: background-color 0.5s ease; */
}

124
src/components/IconGrid/IconGrid.tsx
View File

@@ -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 (
<>
<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)`,
}}
<motion.div className="grid">
{filteredQueryResults.map((icon) => (
<motion.div
key={`ph-${icon.name}-${icon.style}`}
className="grid-item"
whileHover={{ scale: 1.2, zIndex: 1, backgroundColor: "rgb(80, 220, 240)" }}
transition={{ duration: 0.2 }}
>
{(function () {
const icon =
filteredQueryResults[
virtualRow.index * COLUMN_COUNT + virtualColumn.index
];
if (!icon) return null;
return (
<>
<img
{/* <img
color={color}
style={{ height: size, width: size }}
src={icon.asset}
alt={`${icon.name} icon`}
width="100%"
/>
/> */}
<svg
width={size}
height={size}
viewBox="0 0 16 16"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<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)"
>
<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={color}
fillRule="nonzero"
></path>
</g>
</g>
</g>
</svg>
<p style={{ padding: 16 }}>{icon.name}</p>
</>
);
})()}
</div>
</motion.div>
))}
</React.Fragment>
))}
</div>
</div>
</>
</motion.div>
);
};

2
src/components/IconGrid/IconGridRL.tsx
View File

@@ -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>
);

20
src/components/IconGrid/IconGridUV.css Normal file
View File

@@ -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;
}

102
src/components/IconGrid/IconGridUV.tsx Normal file
View File

@@ -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;

4
src/components/Toolbar/Toolbar.tsx
View File

@@ -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>
);
}

1
src/components/index.ts
View File

@@ -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";

2
src/lib/Icon.ts
View File

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

11060
yarn.lock
View File

File diff suppressed because it is too large Load Diff