Scaffold out UI components

package.json

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

src/assets/wifi-none.svg

@@ -5,7 +5,7 @@
         <g id="REFACTOR---Testing-32-line-style-MEDIUM---REFACTOR" transform="translate(-140.000000, -964.000000)">
             <g id="wifi-none" transform="translate(140.000000, 964.000000)">
                 <polygon id="Fill-1" points="0 16 16 16 16 0 0 0"></polygon>
-                <path d="M0.530320514,4.68854581 C4.84102186,1.10413233 11.1598612,1.10382182 15.4697346,4.68859162 C15.6707894,4.85582047 15.705505,5.14446392 15.5646303,5.35264953 L15.5035534,5.42655339 L15.530262,5.39747995 L8.38126201,13.82348 L8.32347995,13.881262 L8.28745538,13.9091472 L8.24453666,13.9362769 L8.17020757,13.9702819 L8.08317994,13.9930438 L7.99824074,14.000008 L7.91682006,13.9930438 L7.82979243,13.9702819 L7.75026407,13.9332653 L7.67652005,13.881262 L7.61873799,13.82348 L0.497446609,5.42755339 C0.288394924,5.21850171 0.304084973,4.87666409 0.530320514,4.68854581 Z M14.3389493,5.0725781 C10.5887928,2.30917949 5.41198028,2.30941139 1.66109689,5.07264917 L1.566,5.144 L8,12.726 L14.434,5.145 L14.3389493,5.0725781 Z" id="Stroke-2" fill="#000000" fill-rule="nonzero"></path>
+                <path d="M0.530320514,4.68854581 C4.84102186,1.10413233 11.1598612,1.10382182 15.4697346,4.68859162 C15.6707894,4.85582047 15.705505,5.14446392 15.5646303,5.35264953 L15.5035534,5.42655339 L15.530262,5.39747995 L8.38126201,13.82348 L8.32347995,13.881262 L8.28745538,13.9091472 L8.24453666,13.9362769 L8.17020757,13.9702819 L8.08317994,13.9930438 L7.99824074,14.000008 L7.91682006,13.9930438 L7.82979243,13.9702819 L7.75026407,13.9332653 L7.67652005,13.881262 L7.61873799,13.82348 L0.497446609,5.42755339 C0.288394924,5.21850171 0.304084973,4.87666409 0.530320514,4.68854581 Z M14.3389493,5.0725781 C10.5887928,2.30917949 5.41198028,2.30941139 1.66109689,5.07264917 L1.566,5.144 L8,12.726 L14.434,5.145 L14.3389493,5.0725781 Z" id="Stroke-2" fill="currentColor" fill-rule="nonzero"></path>
             </g>
         </g>
     </g>

src/components/App/App.css

@@ -1,38 +1,62 @@
-.App {
+body {
-  text-align: center;
+  margin: 0px;
+  font-family: monospace;
 }
 
-.App-logo {
+button, select {
-  height: 40vmin;
+  margin: 4px;
-  pointer-events: none;
+  padding: 8px;
+  border: 1px solid black;
+  border-radius: 24px;
+  background-color: white;
 }
 
-@media (prefers-reduced-motion: no-preference) {
+button:focus, select:focus {
-  .App-logo {
+  outline: none;
-    animation: App-logo-spin infinite 20s linear;
+  border: 1px solid violet;
-  }
+  border-radius: 24px;
 }
 
-.App-header {
+button:active {
-  background-color: #282c34;
+  background-color: lightblue;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
 
-.App-link {
+input[type="color"] {
-  color: #61dafb;
+  border: 1px solid black;
-  size: 1em;
+  border-radius: 24px;
 }
 
-@keyframes App-logo-spin {
+input[type="color" i] {
-  from {
+  -webkit-appearance: square-button;
-    transform: rotate(0deg);
+  width: 32px;
-  }
+  height: 32px;
-  to {
-    transform: rotate(360deg);
-  }
 }
+
+#color-picker {
+  padding: 0px;
+  border-radius: 100%;
+    height: 32px;
+    width: 32px;
+    border: none;
+    outline: none;
+    -webkit-appearance: none;
+}
+
+#color-picker::-webkit-color-swatch {
+  border: none;
+  border-radius: 50%;
+}
+
+/* input {
+  margin: 4px;
+  padding: 8px;
+  border: 2px solid black;
+  border-radius: 24px;
+  background-color: transparent;
+}
+
+input:focus {
+  outline: none;
+  border: 2px solid violet;
+  border-radius: 24px;
+} */

src/components/App/App.tsx

@@ -1,22 +1,18 @@
 import React from "react";
-import { Toolbar, IconGrid } from "../";
 
-const App = () => {
+import { Header, Toolbar, IconGrid, Footer } from "../";
+import "./App.css";
+
+const App: React.FC<any> = () => {
   return (
-    <div>
+    <>
-      <header>
+      <Header />
-        <h1>Phosphor Icons</h1>
+      <main>
-        <a
-          href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          on the play store
-        </a>
-      </header>
         <Toolbar />
         <IconGrid />
-    </div>
+      </main>
+      <Footer />
+    </>
   );
 };
 

src/components/ColorInput/ColorInput.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { useRecoilState } from "recoil";
+
+import { iconColorAtom } from "../../state/atoms";
+
+type ColorInputProps = {};
+
+const ColorInput: React.FC<ColorInputProps> = () => {
+  const [color, setColor] = useRecoilState(iconColorAtom);
+
+  const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const {
+      target: { value: color },
+    } = event;
+    if (color[0] === "#") setColor(color);
+  };
+
+  return (
+    <div>
+      <label htmlFor="color-picker" hidden>
+        Icon Color
+      </label>
+      <input
+        id="color-picker"
+        type="color"
+        onChange={handleColorChange}
+        value={color}
+      />
+    </div>
+  );
+};
+
+export default ColorInput;

src/components/Footer/Footer.css

@@ -0,0 +1,6 @@
+footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}

src/components/Footer/Footer.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { Droid } from "phosphor-react";
+import "./Footer.css";
+
+type FooterProps = {};
+
+const Footer: React.FC<FooterProps> = () => {
+  return (
+    <footer>
+      <span role="img" aria-label="Emoji of female technologist, male technologist, and cat">👩🏻‍💻👨🏻‍💻🐱</span>
+      <div>Copyright © 2020 Phosphor Icons</div>
+      <div>
+        Phosphor Icons is designed by{" "}
+        <a href="https://helenazhang.com">Helena Zhang</a> & built by{" "}
+        <a href="https://tobiasfried.com">Tobias Fried</a>, with love.
+      </div>
+      <button style={{ display: "flex", alignItems: "center", padding: 8 }}>Phosphor for <Droid /></button>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/Header/Header.css

@@ -0,0 +1,8 @@
+header {
+  display: flex;
+  align-items: center;
+}
+
+header > * {
+  flex: 1;
+}

src/components/Header/Header.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import "./Header.css";
+
+type HeaderProps = {};
+
+const Header: React.FC<HeaderProps> = () => {
+  return (
+    <header>
+      <div style={{ paddingLeft: 32 }}>
+        <h1>Phosphor Icons</h1>
+      </div>
+      <div style={{ paddingRight: 32, textAlign: "end" }}>
+        <button>Download All</button>
+        <button>Request</button>
+        <button>Donate</button>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/components/IconGrid/IconGrid.css

@@ -1,6 +1,7 @@
 .grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  /* min-height: 100vh; */
 }
 
 .grid-item {
@@ -10,7 +11,7 @@
   justify-content: center;
   margin: 4px;
   border-radius: 8px;
-  background-color: gainsboro;
+  background-color: white;
   /* transition: background-color 0.5s ease; */
 }
 

src/components/IconGrid/IconGrid.tsx

@@ -3,7 +3,7 @@ import { useRecoilValue } from "recoil";
 import { motion } from "framer-motion";
 
 import { filteredQueryResultsSelector } from "../../state/selectors";
-import { iconColorAtom, iconSizeAtom } from "../../state/atoms";
+import { iconColorAtom, iconSizeAtom, styleQueryAtom } from "../../state/atoms";
 import "./IconGrid.css";
 
 type IconGridProps = {};
@@ -13,62 +13,30 @@ type IconGridProps = {};
 //   closed: { opacity: 0, x: "-100%" },
 // }
 
+const whileHover = {
+  boxShadow: "0 0 0 2px rgb(0, 0, 0)",
+  // scale: 1.2,
+};
+
+const transition = { duration: 0.2 };
+
 const IconGrid: React.FC<IconGridProps> = () => {
+  const weight = useRecoilValue(styleQueryAtom);
   const color = useRecoilValue(iconColorAtom);
   const size = useRecoilValue(iconSizeAtom);
   const filteredQueryResults = useRecoilValue(filteredQueryResultsSelector);
 
   return (
     <motion.div className="grid">
-      {filteredQueryResults.map((icon) => (
+      {filteredQueryResults.map(({ name, Icon }) => (
         <motion.div
-          key={`ph-${icon.name}-${icon.style}`}
+          key={name}
           className="grid-item"
-          whileHover={{ scale: 1.2, zIndex: 1, backgroundColor: "rgb(80, 220, 240)" }}
+          whileHover={whileHover}
-          transition={{ duration: 0.2 }}
+          transition={transition}
         >
-          {/* <img
+          <Icon color={color} size={size} weight={weight} />
-            color={color}
+          <p>{name}</p>
-            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>
         </motion.div>
       ))}
     </motion.div>

src/components/SearchInput/SearchInput.css

@@ -0,0 +1,32 @@
+.search-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 250px;
+  margin: 4px;
+  padding: 8px 16px;
+  border: 1px solid black;
+  border-radius: 24px;
+  background-color: white;
+}
+
+.search-bar:focus-within {
+  outline: none;
+  border: 1px solid violet;
+  border-radius: 24px;
+}
+
+.search-bar input {
+  flex: 1;
+  border: none;
+  margin-left: 8px;
+  padding: 2px 0px 0px;
+}
+
+.search-bar input:focus {
+  outline: none;
+}
+
+.search-bar input::placeholder {
+  color: black;
+}

src/components/SearchInput/SearchInput.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { useRecoilState } from "recoil";
+
+import { searchQueryAtom } from "../../state/atoms";
+import { Search } from "phosphor-react";
+import "./SearchInput.css";
+
+type SearchInputProps = {};
+
+const SearchInput: React.FC<SearchInputProps> = () => {
+  const [query, setQuery] = useRecoilState(searchQueryAtom);
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value);
+  };
+  return (
+    <div className="search-bar">
+      <Search />
+      <label htmlFor="search-input" hidden>
+        Search for an icon
+      </label>
+      <input
+        id="search-input"
+        type="text"
+        value={query}
+        placeholder="Search for an icon"
+        onChange={handleSearchChange}
+      />
+    </div>
+  );
+};
+
+export default SearchInput;

src/components/SizeInput/SizeInput.css

@@ -0,0 +1,56 @@
+.size-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 250px;
+  margin: 4px;
+  padding: 8px 16px;
+  border: 1px solid black;
+  border-radius: 24px;
+  background-color: white;
+  font-family: sans-serif;
+  font-size: 13.333px;
+  height: 20px;
+}
+
+.size-bar:focus-within {
+  outline: none;
+  border: 1px solid violet;
+  border-radius: 24px;
+}
+
+.size-bar input {
+  flex: 1;
+  margin-left: 16px;
+  border: none;
+  -webkit-appearance: none;  /* Override default CSS styles */
+  appearance: none;
+  height: 1px; /* Specified height */
+  background: black; /* Grey background */
+  outline: none; /* Remove outline */
+  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
+}
+
+.size-bar input::-webkit-slider-thumb {
+  -webkit-appearance: none; /* Override default look */
+  appearance: none;
+  width: 12px; /* Set a specific slider handle width */
+  height: 12px; /* Slider handle height */
+  background: black; /* Green background */
+  cursor: pointer; /* Cursor on hover */
+}
+
+.size-bar input::-moz-range-thumb {
+  width: 12px; /* Set a specific slider handle width */
+  height: 12px; /* Slider handle height */
+  background: black; /* Green background */
+  cursor: pointer; /* Cursor on hover */
+}
+
+.size-bar input:focus {
+  outline: none;
+}
+
+.size-bar input::placeholder {
+  color: black;
+}

src/components/SizeInput/SizeInput.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { useRecoilState } from "recoil";
+
+import { iconSizeAtom } from "../../state/atoms";
+import "./SizeInput.css";
+
+type SizeInputProps = {};
+
+const SizeInput: React.FC<SizeInputProps> = () => {
+  const [size, setSize] = useRecoilState(iconSizeAtom);
+
+  const handleSizeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const {
+      target: { value },
+    } = event;
+    const sizeInput = parseInt(value);
+
+    if (sizeInput > 0) setSize(sizeInput);
+  };
+
+  return (
+    <div className="size-bar">
+      <label htmlFor="size-input">{`Size: ${size}px`}</label>
+      <input
+        id="size-input"
+        value={size}
+        type="range"
+        title={size.toString()}
+        min={16}
+        max={96}
+        onChange={handleSizeChange}
+        step={4}
+      />
+    </div>
+  );
+};
+
+export default SizeInput;

src/components/StyleInput/StyleInput.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { useRecoilState } from "recoil";
+
+import { styleQueryAtom } from "../../state/atoms";
+import { IconStyle } from "../../lib";
+
+type StyleInputProps = {};
+
+const StyleInput: React.FC<StyleInputProps> = () => {
+  const [style, setStyle] = useRecoilState(styleQueryAtom);
+
+  const handleStyleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setStyle(event.target.value as IconStyle);
+  };
+
+  return (
+    <div>
+      <label htmlFor="style-input" hidden>
+        Icon Size
+      </label>
+      <select
+        id="style-input"
+        value={style?.toString()}
+        onChange={handleStyleChange}
+      >
+        <option value={IconStyle.THIN}>Thin</option>
+        <option value={IconStyle.LIGHT}>Light</option>
+        <option value={IconStyle.REGULAR}>Regular</option>
+        <option value={IconStyle.BOLD}>Bold</option>
+        <option value={IconStyle.FILL}>Fill</option>
+        <option value={IconStyle.DUOTONE}>Duotone</option>
+      </select>
+    </div>
+  );
+};
+
+export default StyleInput;

src/components/Toolbar/Toolbar.css

@@ -0,0 +1,11 @@
+.toolbar {
+  position: sticky;
+  top: 0px;
+  padding: 8px;
+  background-color: #f2f2f2;
+  border: 1px 0px 1px solid black;
+  z-index: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/components/Toolbar/Toolbar.tsx

@@ -1,54 +1,19 @@
 import React from "react";
-import { useRecoilState } from "recoil";
 
-import { searchQueryAtom, styleQueryAtom, iconSizeAtom, iconColorAtom } from "../../state/atoms";
+import { SearchInput, SizeInput, StyleInput, ColorInput } from "../";
-import { IconStyle } from "../../lib/Icon";
+import "./Toolbar.css";
 
-type ToolbarProps = {}
+type ToolbarProps = {};
 
 const Toolbar: React.FC<ToolbarProps> = () => {
-  const [query, setQuery] = useRecoilState(searchQueryAtom);
-  const [style, setStyle] = useRecoilState(styleQueryAtom);
-  const [size, setSize] = useRecoilState(iconSizeAtom);
-  const [color, setColor] = useRecoilState(iconColorAtom);
-
-  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setQuery(event.target.value);
-  };
-
-  const handleStyleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setStyle(event.target.value as IconStyle);
-  };
-
-  const handleSizeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { target: { value }} = event;
-    const sizeInput = parseInt(value);
-
-    if (sizeInput > 0) setSize(sizeInput);
-  }
-
-  void(color)
-  const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { target: { value: color }} = event;
-    if (color[0] === "#") setColor(color);
-  }
-
   return (
-    <div style={{ position: "sticky", top: 0, padding: 8, backgroundColor: "white", zIndex: 1.1 }}>
+    <div className="toolbar">
-      <input value={query} onChange={handleSearchChange} />
+      <StyleInput />
-      <select value={style?.toString()} onChange={handleStyleChange}>
+      <SearchInput />
-        <option value={""}>All</option>
+      <SizeInput />
-        <option value={IconStyle.THIN}>Thin</option>
+      <ColorInput />
-        <option value={IconStyle.LIGHT}>Light</option>
-        <option value={IconStyle.REGULAR}>Regular</option>
-        <option value={IconStyle.BOLD}>Bold</option>
-        <option value={IconStyle.FILL}>Fill</option>
-        <option value={IconStyle.DUOTONE}>Duotone</option>
-      </select>
-      <input value={size} type="range" min={12} max={256} onChange={handleSizeChange}/>
-      <input type="color" onChange={handleColorChange}/>
     </div>
   );
-}
+};
 
 export default Toolbar;

src/components/index.ts

@@ -1,4 +1,10 @@
 export { default as App } from "./App/App";
+export { default as Header } from "./Header/Header";
 export { default as IconGrid } from "./IconGrid/IconGrid";
 export { default as IconGridUV } from "./IconGrid/IconGridUV";
 export { default as Toolbar } from "./Toolbar/Toolbar";
+export { default as ColorInput } from "./ColorInput/ColorInput";
+export { default as SearchInput } from "./SearchInput/SearchInput";
+export { default as SizeInput } from "./SizeInput/SizeInput";
+export { default as StyleInput } from "./StyleInput/StyleInput";
+export { default as Footer } from "./Footer/Footer";

src/lib/iconList.ts

@@ -1,368 +0,0 @@
-import { Icon, IconCategory, IconStyle } from "./Icon";
-
-export const iconList: Icon[] = [
-  {
-    name: "6-square",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DESIGN],
-    tags: ["number", "digit", "six", "box"],
-    asset: require("../assets/6-square.svg"),
-  },
-  {
-    name: "6-square-sharp",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DESIGN],
-    tags: ["number", "digit", "six", "box"],
-    asset: require("../assets/6-square-sharp.svg"),
-  },
-  {
-    name: "8-circle",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DESIGN],
-    tags: ["number", "digit", "eight", "round"],
-    asset: require("../assets/8-circle.svg"),
-  },
-  {
-    name: "arrow-right-circle",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DESIGN],
-    tags: ["pointer", "direction", "round"],
-    asset: require("../assets/arrow-right-circle.svg"),
-  },
-  {
-    name: "basketball",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.BRAND, IconCategory.HEALTH, IconCategory.OTHER],
-    tags: ["sports", "games", "athletics", "dribbble"],
-    asset: require("../assets/basketball.svg"),
-  },
-  {
-    name: "battery-half",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DEVICE, IconCategory.SYSTEM],
-    tags: ["charged", "charger", "charging", "power"],
-    asset: require("../assets/battery-half.svg"),
-  },
-  {
-    name: "battery-half-hash",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DEVICE, IconCategory.SYSTEM],
-    tags: ["charged", "charger", "charging", "power"],
-    asset: require("../assets/battery-half-hash.svg"),
-  },
-  {
-    name: "book-open",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DOCUMENT, IconCategory.OTHER],
-    tags: ["reading", "reader", "novel", "story"],
-    asset: require("../assets/book-open.svg"),
-  },
-  {
-    name: "calendar-6",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.BUSINESS, IconCategory.SYSTEM],
-    tags: ["dates", "times", "events", "schedule", "six"],
-    asset: require("../assets/calendar-6.svg"),
-  },
-  {
-    name: "check-circle",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.BUSINESS, IconCategory.SYSTEM],
-    tags: ["todo", "to-do", "list", "checkbox", "round"],
-    asset: require("../assets/check-circle.svg"),
-  },
-  {
-    name: "clock",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.SYSTEM],
-    tags: ["times", "timer", "alarm", "schedule", "events", "watch"],
-    asset: require("../assets/clock.svg"),
-  },
-  {
-    name: "cloud",
-    style: IconStyle.REGULAR,
-    categories: [
-      IconCategory.BUSINESS,
-      IconCategory.SYSTEM,
-      IconCategory.WEATHER,
-    ],
-    tags: ["serverless", "backup", "storage"],
-    asset: require("../assets/cloud.svg"),
-  },
-  {
-    name: "cube",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DESIGN, IconCategory.OTHER],
-    tags: ["square", "box", "3d", "volume", "blocks"],
-    asset: require("../assets/cube.svg"),
-  },
-  {
-    name: "delete",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.SYSTEM],
-    tags: ["keyboard", "remove", "backspace"],
-    asset: require("../assets/delete.svg"),
-  },
-  {
-    name: "doc",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
-    tags: ["documents", "files", "save"],
-    asset: require("../assets/doc.svg"),
-  },
-  {
-    name: "doc-text",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
-    tags: ["documents", "files", "save", "write"],
-    asset: require("../assets/doc-text.svg"),
-  },
-  {
-    name: "doc-x",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
-    tags: ["documents", "files", "cancel", "discard", "close"],
-    asset: require("../assets/doc-x.svg"),
-  },
-  {
-    name: "do-not-disturb",
-    style: IconStyle.REGULAR,
-    categories: [
-      IconCategory.SYSTEM,
-      IconCategory.USERS,
-      IconCategory.WEATHER,
-      IconCategory.OTHER,
-    ],
-    tags: ["forbidden", "disallowed", "blocked", "spam"],
-    asset: require("../assets/do-not-disturb.svg"),
-  },
-  {
-    name: "droid",
-    style: IconStyle.REGULAR,
-    categories: [
-      IconCategory.BRAND,
-      IconCategory.COMMUNICATION,
-      IconCategory.DEVELOPMENT,
-      IconCategory.DEVICE,
-      IconCategory.SYSTEM,
-    ],
-    tags: ["android", "google", "mobile", "phone", "cellular", "cellphone"],
-    asset: require("../assets/droid.svg"),
-  },
-  {
-    name: "folder",
-    style: IconStyle.REGULAR,
-    categories: [
-      IconCategory.DOCUMENT,
-      IconCategory.EDITOR,
-      IconCategory.SYSTEM,
-    ],
-    tags: ["directory", "directories", "files"],
-    asset: require("../assets/folder.svg"),
-  },
-  {
-    name: "folder-dip",
-    style: IconStyle.REGULAR,
-    categories: [
-      IconCategory.DOCUMENT,
-      IconCategory.EDITOR,
-      IconCategory.SYSTEM,
-    ],
-    tags: ["directory", "directories", "files"],
-    asset: require("../assets/folder-dip.svg"),
-  },
-  {
-    name: "heart",
-    style: IconStyle.REGULAR,
-    categories: [
-      IconCategory.COMMUNICATION,
-      IconCategory.DESIGN,
-      IconCategory.HEALTH,
-      IconCategory.OTHER,
-    ],
-    tags: ["wellness", "love", "healthy", "like"],
-    asset: require("../assets/heart.svg"),
-  },
-  {
-    name: "horse",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.HEALTH, IconCategory.OTHER],
-    tags: ["animals", "equestrian", "chess", "knight", "games", "sports"],
-    asset: require("../assets/horse.svg"),
-  },
-  {
-    name: "intersect",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DESIGN],
-    tags: ["merge", "join", "intersection", "layers"],
-    asset: require("../assets/intersect.svg"),
-  },
-  {
-    name: "mail",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.BUSINESS, IconCategory.COMMUNICATION],
-    tags: ["email", "messages", "messaging", "send", "sent"],
-    asset: require("../assets/mail.svg"),
-  },
-  {
-    name: "medium",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.BRAND],
-    tags: ["publish", "writing", "write"],
-    asset: require("../assets/medium.svg"),
-  },
-  {
-    name: "meh",
-    style: IconStyle.REGULAR,
-    categories: [
-      IconCategory.COMMUNICATION,
-      IconCategory.DESIGN,
-      IconCategory.OTHER,
-    ],
-    tags: ["face", "smiley", "emoji", "unimpressed"],
-    asset: require("../assets/meh.svg"),
-  },
-  {
-    name: "mic",
-    style: IconStyle.REGULAR,
-    categories: [
-      IconCategory.COMMUNICATION,
-      IconCategory.DEVICE,
-      IconCategory.MEDIA,
-      IconCategory.SYSTEM,
-    ],
-    tags: ["microphone", "audio", "recording", "music", "sound", "podcast"],
-    asset: require("../assets/mic.svg"),
-  },
-  {
-    name: "music-beam-angled",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
-    tags: ["songs", "audio", "playlist", "albums"],
-    asset: require("../assets/music-beam-angled.svg"),
-  },
-  {
-    name: "music-beam-straight",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
-    tags: ["songs", "audio", "playlist", "albums"],
-    asset: require("../assets/music-beam-straight.svg"),
-  },
-  {
-    name: "pencil-line",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DESIGN, IconCategory.EDITOR],
-    tags: ["write", "writing", "editing", "sign", "signature"],
-    asset: require("../assets/pencil-line.svg"),
-  },
-  {
-    name: "pen-nib",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DESIGN, IconCategory.EDITOR],
-    tags: [
-      "write",
-      "writing",
-      "editing",
-      "sign",
-      "signature",
-      "fountain pen",
-      "illustrator",
-    ],
-    asset: require("../assets/pen-nib.svg"),
-  },
-  {
-    name: "profile-round",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.USERS],
-    tags: ["person", "users", "account", "login", "circle"],
-    asset: require("../assets/profile-round.svg"),
-  },
-  {
-    name: "rewind",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
-    tags: ["backwards", "reverse", "audio", "recording", "music", "sound"],
-    asset: require("../assets/rewind.svg"),
-  },
-  {
-    name: "send",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.BUSINESS, IconCategory.COMMUNICATION],
-    tags: ["mail", "email", "messages", "up", "arrow", "pointer", "direction"],
-    asset: require("../assets/chevron.svg"),
-  },
-  {
-    name: "star",
-    style: IconStyle.REGULAR,
-    categories: [
-      IconCategory.COMMUNICATION,
-      IconCategory.MAP,
-      IconCategory.OTHER,
-    ],
-    tags: ["rate", "ratings", "favorites"],
-    asset: require("../assets/star.svg"),
-  },
-  {
-    name: "table",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.EDITOR, IconCategory.OTHER],
-    tags: ["tabular", "spreadsheet", "excel"],
-    asset: require("../assets/table.svg"),
-  },
-  {
-    name: "trash",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
-    tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
-    asset: require("../assets/trash.svg"),
-  },
-  {
-    name: "trash-duo",
-    style: IconStyle.DUOTONE,
-    categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
-    tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
-    asset: require("../assets/trash-duo.svg"),
-  },
-  {
-    name: "trash-solid",
-    style: IconStyle.FILL,
-    categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
-    tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
-    asset: require("../assets/trash-solid.svg"),
-  },
-  {
-    name: "volume-off",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DEVICE, IconCategory.MEDIA, IconCategory.SYSTEM],
-    tags: ["speakers", "audio", "recording", "music", "sound"],
-    asset: require("../assets/volume-off.svg"),
-  },
-  {
-    name: "warning",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.SYSTEM],
-    tags: ["alert", "danger", "dangerous", "caution"],
-    asset: require("../assets/warning.svg"),
-  },
-  {
-    name: "wifi-full",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.SYSTEM],
-    tags: ["wireless", "internet", "network", "connection", "connectivity"],
-    asset: require("../assets/wifi-full.svg"),
-  },
-  {
-    name: "wifi-low",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.SYSTEM],
-    tags: ["wireless", "internet", "network", "connection", "connectivity"],
-    asset: require("../assets/wifi-low.svg"),
-  },
-  {
-    name: "wifi-none",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.SYSTEM],
-    tags: ["wireless", "internet", "network", "connection", "connectivity"],
-    asset: require("../assets/wifi-none.svg"),
-  },
-];

src/lib/icons.ts

@@ -0,0 +1,642 @@
+import * as Icon from "phosphor-react";
+import { IconEntry, IconCategory } from ".";
+
+export const icons: Readonly<IconEntry[]> = [
+  {
+    name: "arrow-up-right-circle",
+    categories: [IconCategory.DESIGN],
+    tags: ["pointer", "direction", "round"],
+    Icon: Icon.ArrowUpRightCircle,
+  },
+  {
+    name: "backspace",
+    categories: [IconCategory.SYSTEM],
+    tags: ["keyboard", "remove", "delete"],
+    Icon: Icon.Backspace,
+  },
+  {
+    name: "battery-half",
+    categories: [IconCategory.DEVICE, IconCategory.SYSTEM],
+    tags: ["charged", "charger", "charging", "power"],
+    Icon: Icon.BatteryHalf,
+  },
+  {
+    name: "book-closed",
+    categories: [IconCategory.DOCUMENT, IconCategory.OTHER],
+    tags: ["reading", "reader", "novel", "story"],
+    Icon: Icon.BookClosed,
+  },
+  {
+    name: "calendar-x",
+    categories: [IconCategory.BUSINESS, IconCategory.SYSTEM],
+    tags: ["dates", "times", "events", "schedule", "closed", "cancelled"],
+    Icon: Icon.CalendarX,
+  },
+  {
+    name: "check-circle",
+    categories: [IconCategory.BUSINESS, IconCategory.SYSTEM],
+    tags: ["todo", "to-do", "list", "checkbox", "round"],
+    Icon: Icon.CheckCircle,
+  },
+  {
+    name: "clock",
+    categories: [IconCategory.SYSTEM],
+    tags: ["times", "timer", "alarm", "schedule", "events", "watch"],
+    Icon: Icon.Clock,
+  },
+  {
+    name: "cloud",
+    categories: [
+      IconCategory.BUSINESS,
+      IconCategory.SYSTEM,
+      IconCategory.WEATHER,
+    ],
+    tags: ["serverless", "backup", "storage"],
+    Icon: Icon.Cloud,
+  },
+  {
+    name: "copy",
+    categories: [IconCategory.EDITOR, IconCategory.SYSTEM],
+    tags: ["duplicated", "copied"],
+    Icon: Icon.Copy,
+  },
+  {
+    name: "cube",
+    categories: [IconCategory.DESIGN, IconCategory.OTHER],
+    tags: ["square", "box", "3d", "volume", "blocks"],
+    Icon: Icon.Cube,
+  },
+  {
+    name: "document-text",
+    categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
+    tags: ["documents", "files", "save", "write"],
+    Icon: Icon.DocumentText,
+  },
+  {
+    name: "droid",
+    categories: [
+      IconCategory.BRAND,
+      IconCategory.COMMUNICATION,
+      IconCategory.DEVELOPMENT,
+      IconCategory.DEVICE,
+      IconCategory.SYSTEM,
+    ],
+    tags: ["android", "google", "mobile", "phone", "cellular", "cellphone"],
+    Icon: Icon.Droid,
+  },
+  {
+    name: "envelope",
+    categories: [IconCategory.COMMUNICATION],
+    tags: ["mail", "email", "send", "sent", "message"],
+    Icon: Icon.Envelope,
+  },
+  {
+    name: "envelope-alt",
+    categories: [IconCategory.COMMUNICATION],
+    tags: ["mail", "email", "send", "sent", "message"],
+    Icon: Icon.EnvelopeAlt,
+  },
+  {
+    name: "folder",
+    categories: [
+      IconCategory.DOCUMENT,
+      IconCategory.EDITOR,
+      IconCategory.SYSTEM,
+    ],
+    tags: ["directory", "directories", "files"],
+    Icon: Icon.Folder,
+  },
+  {
+    name: "folder-dip",
+    categories: [
+      IconCategory.DOCUMENT,
+      IconCategory.EDITOR,
+      IconCategory.SYSTEM,
+    ],
+    tags: ["directory", "directories", "files"],
+    Icon: Icon.FolderDip,
+  },
+  {
+    name: "folder-minimal",
+    categories: [
+      IconCategory.DOCUMENT,
+      IconCategory.EDITOR,
+      IconCategory.SYSTEM,
+    ],
+    tags: ["directory", "directories", "files"],
+    Icon: Icon.FolderMinimal,
+  },
+  {
+    name: "heart",
+    categories: [
+      IconCategory.COMMUNICATION,
+      IconCategory.DESIGN,
+      IconCategory.HEALTH,
+      IconCategory.OTHER,
+    ],
+    tags: ["wellness", "love", "healthy", "like"],
+    Icon: Icon.Heart,
+  },
+  {
+    name: "horse",
+    categories: [IconCategory.HEALTH, IconCategory.OTHER],
+    tags: ["animals", "equestrian", "chess", "knight", "games", "sports"],
+    Icon: Icon.Horse,
+  },
+  {
+    name: "microphone",
+    categories: [
+      IconCategory.COMMUNICATION,
+      IconCategory.DEVICE,
+      IconCategory.MEDIA,
+      IconCategory.SYSTEM,
+    ],
+    tags: ["microphone", "audio", "recording", "music", "sound", "podcast"],
+    Icon: Icon.Microphone,
+  },
+  {
+    name: "minus-circle",
+    categories: [
+      IconCategory.DEVELOPMENT,
+      IconCategory.FINANCE,
+      IconCategory.OTHER,
+    ],
+    tags: [
+      "subtraction",
+      "difference",
+      "mathematics",
+      "arithmetic",
+      "calculator",
+      "round",
+    ],
+    Icon: Icon.MinusCircle,
+  },
+  {
+    name: "music-notes-sixteenth",
+    categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
+    tags: ["songs", "audio", "playlist", "albums"],
+    Icon: Icon.MusicNotesSixteenth,
+  },
+  {
+    name: "pencil-clip",
+    categories: [IconCategory.DESIGN, IconCategory.EDITOR],
+    tags: ["write", "writing", "editing", "sign", "signature"],
+    Icon: Icon.PencilClip,
+  },
+  {
+    name: "pencil-line",
+    categories: [IconCategory.DESIGN, IconCategory.EDITOR],
+    tags: ["write", "writing", "editing", "sign", "signature"],
+    Icon: Icon.PencilLine,
+  },
+  {
+    name: "pen-nib",
+    categories: [IconCategory.DESIGN, IconCategory.EDITOR],
+    tags: [
+      "write",
+      "writing",
+      "editing",
+      "sign",
+      "signature",
+      "fountain pen",
+      "illustrator",
+    ],
+    Icon: Icon.PenNib,
+  },
+  {
+    name: "pin",
+    categories: [IconCategory.MAP],
+    tags: ["places", "markers", "locations"],
+    Icon: Icon.Pin,
+  },
+  {
+    name: "play-circle",
+    categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
+    tags: ["resume", "music", "start", "round"],
+    Icon: Icon.PlayCircle,
+  },
+  {
+    name: "plus-circle",
+    categories: [
+      IconCategory.DEVELOPMENT,
+      IconCategory.FINANCE,
+      IconCategory.OTHER,
+    ],
+    tags: [
+      "addition",
+      "sum",
+      "mathematics",
+      "arithmetic",
+      "calculator",
+      "round",
+    ],
+    Icon: Icon.PlusCircle,
+  },
+  {
+    name: "prohibit",
+    categories: [IconCategory.MAP, IconCategory.SYSTEM, IconCategory.OTHER],
+    tags: [
+      "forbidden",
+      "prohibited",
+      "cancelled",
+      "prevent",
+      "stop",
+      "do not enter",
+    ],
+    Icon: Icon.Prohibit,
+  },
+  {
+    name: "search",
+    categories: [IconCategory.EDITOR, IconCategory.SYSTEM],
+    tags: ["find", "locate", "query"],
+    Icon: Icon.Search,
+  },
+  {
+    name: "smiley",
+    categories: [
+      IconCategory.COMMUNICATION,
+      IconCategory.DESIGN,
+      IconCategory.OTHER,
+    ],
+    tags: ["face", "smiley", "emoji", "unimpressed"],
+    Icon: Icon.Smiley,
+  },
+  {
+    name: "smiley-meh",
+    categories: [
+      IconCategory.COMMUNICATION,
+      IconCategory.DESIGN,
+      IconCategory.OTHER,
+    ],
+    tags: ["face", "smiley", "emoji", "unimpressed"],
+    Icon: Icon.SmileyMeh,
+  },
+  {
+    name: "speaker-off",
+    categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
+    tags: ["muted", "volume", "sound", "music"],
+    Icon: Icon.SpeakerOff,
+  },
+  {
+    name: "star",
+    categories: [
+      IconCategory.COMMUNICATION,
+      IconCategory.MAP,
+      IconCategory.OTHER,
+    ],
+    tags: ["rate", "ratings", "favorites"],
+    Icon: Icon.Star,
+  },
+  {
+    name: "trash",
+    categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
+    tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
+    Icon: Icon.Trash,
+  },
+  {
+    name: "two-circle",
+    categories: [IconCategory.DESIGN],
+    tags: ["number", "digit", "2", "round"],
+    Icon: Icon.TwoCircle,
+  },
+  {
+    name: "user-circle",
+    categories: [IconCategory.USERS],
+    tags: ["person", "users", "account", "login", "circle"],
+    Icon: Icon.UserCircle,
+  },
+  {
+    name: "warning-triangle",
+    categories: [IconCategory.SYSTEM],
+    tags: ["alert", "danger", "dangerous", "caution"],
+    Icon: Icon.WarningTriangle,
+  },
+  {
+    name: "wifi-medium",
+    categories: [IconCategory.SYSTEM],
+    tags: ["wireless", "internet", "network", "connection", "connectivity"],
+    Icon: Icon.WifiMedium,
+  },
+];
+
+// export const iconList: Icon[] = [
+//   {
+//     name: "6-square",
+//     categories: [IconCategory.DESIGN],
+//     tags: ["number", "digit", "six", "box"],
+//     Icon: require("../Icons/6-square.svg"),
+//   },
+//   {
+//     name: "6-square-sharp",
+//     categories: [IconCategory.DESIGN],
+//     tags: ["number", "digit", "six", "box"],
+//     Icon: require("../Icons/6-square-sharp.svg"),
+//   },
+//   {
+//     name: "8-circle",
+//     categories: [IconCategory.DESIGN],
+//     tags: ["number", "digit", "eight", "round"],
+//     Icon: require("../Icons/8-circle.svg"),
+//   },
+//   {
+//     name: "arrow-right-circle",
+//     categories: [IconCategory.DESIGN],
+//     tags: ["pointer", "direction", "round"],
+//     Icon: require("../Icons/arrow-right-circle.svg"),
+//   },
+//   {
+//     name: "basketball",
+//     categories: [IconCategory.BRAND, IconCategory.HEALTH, IconCategory.OTHER],
+//     tags: ["sports", "games", "athletics", "dribbble"],
+//     Icon: require("../Icons/basketball.svg"),
+//   },
+//   {
+//     name: "battery-half",
+//     categories: [IconCategory.DEVICE, IconCategory.SYSTEM],
+//     tags: ["charged", "charger", "charging", "power"],
+//     Icon: require("../Icons/battery-half.svg"),
+//   },
+//   {
+//     name: "battery-half-hash",
+//     categories: [IconCategory.DEVICE, IconCategory.SYSTEM],
+//     tags: ["charged", "charger", "charging", "power"],
+//     Icon: require("../Icons/battery-half-hash.svg"),
+//   },
+//   {
+//     name: "book-open",
+//     categories: [IconCategory.DOCUMENT, IconCategory.OTHER],
+//     tags: ["reading", "reader", "novel", "story"],
+//     Icon: require("../Icons/book-open.svg"),
+//   },
+//   {
+//     name: "calendar-6",
+//     categories: [IconCategory.BUSINESS, IconCategory.SYSTEM],
+//     tags: ["dates", "times", "events", "schedule", "six"],
+//     Icon: require("../Icons/calendar-6.svg"),
+//   },
+//   {
+//     name: "check-circle",
+//     categories: [IconCategory.BUSINESS, IconCategory.SYSTEM],
+//     tags: ["todo", "to-do", "list", "checkbox", "round"],
+//     Icon: require("../Icons/check-circle.svg"),
+//   },
+//   {
+//     name: "clock",
+//     categories: [IconCategory.SYSTEM],
+//     tags: ["times", "timer", "alarm", "schedule", "events", "watch"],
+//     Icon: require("../Icons/clock.svg"),
+//   },
+//   {
+//     name: "cloud",
+//     categories: [
+//       IconCategory.BUSINESS,
+//       IconCategory.SYSTEM,
+//       IconCategory.WEATHER,
+//     ],
+//     tags: ["serverless", "backup", "storage"],
+//     Icon: require("../Icons/cloud.svg"),
+//   },
+//   {
+//     name: "cube",
+//     categories: [IconCategory.DESIGN, IconCategory.OTHER],
+//     tags: ["square", "box", "3d", "volume", "blocks"],
+//     Icon: require("../Icons/cube.svg"),
+//   },
+//   {
+//     name: "delete",
+//     categories: [IconCategory.SYSTEM],
+//     tags: ["keyboard", "remove", "backspace"],
+//     Icon: require("../Icons/delete.svg"),
+//   },
+//   {
+//     name: "doc",
+//     categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
+//     tags: ["documents", "files", "save"],
+//     Icon: require("../Icons/doc.svg"),
+//   },
+//   {
+//     name: "doc-text",
+//     categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
+//     tags: ["documents", "files", "save", "write"],
+//     Icon: require("../Icons/doc-text.svg"),
+//   },
+//   {
+//     name: "doc-x",
+//     categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
+//     tags: ["documents", "files", "cancel", "discard", "close"],
+//     Icon: require("../Icons/doc-x.svg"),
+//   },
+//   {
+//     name: "do-not-disturb",
+//     categories: [
+//       IconCategory.SYSTEM,
+//       IconCategory.USERS,
+//       IconCategory.WEATHER,
+//       IconCategory.OTHER,
+//     ],
+//     tags: ["forbidden", "disallowed", "blocked", "spam"],
+//     Icon: require("../Icons/do-not-disturb.svg"),
+//   },
+//   {
+//     name: "droid",
+//     categories: [
+//       IconCategory.BRAND,
+//       IconCategory.COMMUNICATION,
+//       IconCategory.DEVELOPMENT,
+//       IconCategory.DEVICE,
+//       IconCategory.SYSTEM,
+//     ],
+//     tags: ["android", "google", "mobile", "phone", "cellular", "cellphone"],
+//     Icon: require("../Icons/droid.svg"),
+//   },
+//   {
+//     name: "folder",
+//     categories: [
+//       IconCategory.DOCUMENT,
+//       IconCategory.EDITOR,
+//       IconCategory.SYSTEM,
+//     ],
+//     tags: ["directory", "directories", "files"],
+//     Icon: require("../Icons/folder.svg"),
+//   },
+//   {
+//     name: "folder-dip",
+//     categories: [
+//       IconCategory.DOCUMENT,
+//       IconCategory.EDITOR,
+//       IconCategory.SYSTEM,
+//     ],
+//     tags: ["directory", "directories", "files"],
+//     Icon: require("../Icons/folder-dip.svg"),
+//   },
+//   {
+//     name: "heart",
+//     categories: [
+//       IconCategory.COMMUNICATION,
+//       IconCategory.DESIGN,
+//       IconCategory.HEALTH,
+//       IconCategory.OTHER,
+//     ],
+//     tags: ["wellness", "love", "healthy", "like"],
+//     Icon: require("../Icons/heart.svg"),
+//   },
+//   {
+//     name: "horse",
+//     categories: [IconCategory.HEALTH, IconCategory.OTHER],
+//     tags: ["animals", "equestrian", "chess", "knight", "games", "sports"],
+//     Icon: require("../Icons/horse.svg"),
+//   },
+//   {
+//     name: "intersect",
+//     categories: [IconCategory.DESIGN],
+//     tags: ["merge", "join", "intersection", "layers"],
+//     Icon: require("../Icons/intersect.svg"),
+//   },
+//   {
+//     name: "mail",
+//     categories: [IconCategory.BUSINESS, IconCategory.COMMUNICATION],
+//     tags: ["email", "messages", "messaging", "send", "sent"],
+//     Icon: require("../Icons/mail.svg"),
+//   },
+//   {
+//     name: "medium",
+//     categories: [IconCategory.BRAND],
+//     tags: ["publish", "writing", "write"],
+//     Icon: require("../Icons/medium.svg"),
+//   },
+//   {
+//     name: "meh",
+//     categories: [
+//       IconCategory.COMMUNICATION,
+//       IconCategory.DESIGN,
+//       IconCategory.OTHER,
+//     ],
+//     tags: ["face", "smiley", "emoji", "unimpressed"],
+//     Icon: require("../Icons/meh.svg"),
+//   },
+//   {
+//     name: "mic",
+//     categories: [
+//       IconCategory.COMMUNICATION,
+//       IconCategory.DEVICE,
+//       IconCategory.MEDIA,
+//       IconCategory.SYSTEM,
+//     ],
+//     tags: ["microphone", "audio", "recording", "music", "sound", "podcast"],
+//     Icon: require("../Icons/mic.svg"),
+//   },
+//   {
+//     name: "music-beam-angled",
+//     categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
+//     tags: ["songs", "audio", "playlist", "albums"],
+//     Icon: require("../Icons/music-beam-angled.svg"),
+//   },
+//   {
+//     name: "music-beam-straight",
+//     categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
+//     tags: ["songs", "audio", "playlist", "albums"],
+//     Icon: require("../Icons/music-beam-straight.svg"),
+//   },
+//   {
+//     name: "pencil-line",
+//     categories: [IconCategory.DESIGN, IconCategory.EDITOR],
+//     tags: ["write", "writing", "editing", "sign", "signature"],
+//     Icon: require("../Icons/pencil-line.svg"),
+//   },
+//   {
+//     name: "pen-nib",
+//     categories: [IconCategory.DESIGN, IconCategory.EDITOR],
+//     tags: [
+//       "write",
+//       "writing",
+//       "editing",
+//       "sign",
+//       "signature",
+//       "fountain pen",
+//       "illustrator",
+//     ],
+//     Icon: require("../Icons/pen-nib.svg"),
+//   },
+//   {
+//     name: "profile-round",
+//     categories: [IconCategory.USERS],
+//     tags: ["person", "users", "account", "login", "circle"],
+//     Icon: require("../Icons/profile-round.svg"),
+//   },
+//   {
+//     name: "rewind",
+//     categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
+//     tags: ["backwards", "reverse", "audio", "recording", "music", "sound"],
+//     Icon: require("../Icons/rewind.svg"),
+//   },
+//   {
+//     name: "send",
+//     categories: [IconCategory.BUSINESS, IconCategory.COMMUNICATION],
+//     tags: ["mail", "email", "messages", "up", "arrow", "pointer", "direction"],
+//     Icon: require("../Icons/chevron.svg"),
+//   },
+//   {
+//     name: "star",
+//     categories: [
+//       IconCategory.COMMUNICATION,
+//       IconCategory.MAP,
+//       IconCategory.OTHER,
+//     ],
+//     tags: ["rate", "ratings", "favorites"],
+//     Icon: require("../Icons/star.svg"),
+//   },
+//   {
+//     name: "table",
+//     categories: [IconCategory.EDITOR, IconCategory.OTHER],
+//     tags: ["tabular", "spreadsheet", "excel"],
+//     Icon: require("../Icons/table.svg"),
+//   },
+//   {
+//     name: "trash",
+//     categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
+//     tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
+//     Icon: require("../Icons/trash.svg"),
+//   },
+//   {
+//     name: "trash-duo",
+//     categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
+//     tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
+//     Icon: require("../Icons/trash-duo.svg"),
+//   },
+//   {
+//     name: "trash-solid",
+//     categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
+//     tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
+//     Icon: require("../Icons/trash-solid.svg"),
+//   },
+//   {
+//     name: "volume-off",
+//     categories: [IconCategory.DEVICE, IconCategory.MEDIA, IconCategory.SYSTEM],
+//     tags: ["speakers", "audio", "recording", "music", "sound"],
+//     Icon: require("../Icons/volume-off.svg"),
+//   },
+//   {
+//     name: "warning",
+//     categories: [IconCategory.SYSTEM],
+//     tags: ["alert", "danger", "dangerous", "caution"],
+//     Icon: require("../Icons/warning.svg"),
+//   },
+//   {
+//     name: "wifi-full",
+//     categories: [IconCategory.SYSTEM],
+//     tags: ["wireless", "internet", "network", "connection", "connectivity"],
+//     Icon: require("../Icons/wifi-full.svg"),
+//   },
+//   {
+//     name: "wifi-low",
+//     categories: [IconCategory.SYSTEM],
+//     tags: ["wireless", "internet", "network", "connection", "connectivity"],
+//     Icon: require("../Icons/wifi-low.svg"),
+//   },
+//   {
+//     name: "wifi-none",
+//     categories: [IconCategory.SYSTEM],
+//     tags: ["wireless", "internet", "network", "connection", "connectivity"],
+//     Icon: require("../Icons/wifi-none.svg"),
+//   },
+// ];

src/lib/index.ts

@@ -1,3 +1,5 @@
+import { IconProps } from "phosphor-react/dist/lib/Icon";
+
 export enum IconStyle {
   THIN = "thin",
   LIGHT = "light",
@@ -26,10 +28,11 @@ export enum IconCategory {
   OTHER = "Other",
 }
 
-export interface Icon {
+export interface IconEntry {
   name: string;
-  style: IconStyle;
   categories: IconCategory[];
   tags: string[];
-  asset: React.FC<React.SVGProps<SVGSVGElement>>;
+  Icon: React.ForwardRefExoticComponent<
+    IconProps & React.RefAttributes<SVGSVGElement>
+  >;
 }

src/state/atoms.ts

@@ -1,5 +1,5 @@
 import { atom } from "recoil";
-import { IconStyle } from "../lib/Icon";
+import { IconStyle } from "../lib";
 
 /**
  * ATOM
@@ -20,7 +20,7 @@ export const styleQueryAtom = atom<IconStyle>({
 
 export const iconSizeAtom = atom<number>({
   key: "iconSizeAtom",
-  default: 24,
+  default: 32,
 });
 
 export const iconColorAtom = atom<string>({

src/state/selectors.ts

@@ -1,8 +1,8 @@
 import { selector, selectorFamily } from "recoil";
 
 import { searchQueryAtom, styleQueryAtom } from "./atoms";
-import { Icon, IconStyle, IconCategory } from "../lib/Icon";
+import { IconEntry, IconCategory } from "../lib";
-import { iconList } from "../lib/iconList";
+import { icons } from "../lib/icons";
 
 /**
  * SELECTOR
@@ -11,7 +11,7 @@ import { iconList } from "../lib/iconList";
  * modifies the given state in some way:
  */
 
-const isQueryMatch = (icon: Icon, query: string): boolean => {
+const isQueryMatch = (icon: IconEntry, query: string): boolean => {
   return (
     icon.name.includes(query) ||
     icon.tags.some((tag) => tag.toLowerCase().includes(query)) ||
@@ -19,44 +19,43 @@ const isQueryMatch = (icon: Icon, query: string): boolean => {
   );
 };
 
-const isStyleMatch = (icon: Icon, style?: IconStyle): boolean => {
+export const filteredQueryResultsSelector = selector<Readonly<IconEntry[]>>({
-  return !style || icon.style === style;
-};
-
-export const filteredQueryResultsSelector = selector<Icon[]>({
   key: "filteredQueryResultsSelector",
   get: ({ get }) => {
     const query = get(searchQueryAtom).trim().toLowerCase();
     const style = get(styleQueryAtom);
 
-    if (!query && !style) return iconList;
+    if (!query && !style) return icons;
 
-    return iconList.filter((icon) => {
+    return icons.filter((icon) => {
-      return isStyleMatch(icon, style) && isQueryMatch(icon, query);
+      return isQueryMatch(icon, query);
     });
     // .sort(() => Math.floor(Math.random() - 0.5));
   },
 });
 
-type CategorizedIcons = {
+type CategorizedIcons = Partial<Record<IconCategory, IconEntry[]>>;
-  [key in IconCategory]?: Icon[];
-};
 
-export const categorizedQueryResultsSelector = selector<CategorizedIcons>({
+export const categorizedQueryResultsSelector = selector<
+  Readonly<CategorizedIcons>
+>({
   key: "categorizedQueryResultsSelector",
   get: ({ get }) => {
     const filteredResults = get(filteredQueryResultsSelector);
     return filteredResults.reduce<CategorizedIcons>((acc, curr) => {
       curr.categories.forEach((category) => {
-        if (acc[category]) acc[category]?.push(curr);
+        if (!acc[category]) acc[category] = [];
-        else acc[category] = [curr];
+        acc[category]!!.push(curr);
       });
       return acc;
     }, {});
   },
 });
 
-export const singleCategoryQueryResultsSelector = selectorFamily<Icon[], IconCategory>({
+export const singleCategoryQueryResultsSelector = selectorFamily<
+  Readonly<IconEntry[]>,
+  IconCategory
+>({
   key: "singleCategoryQueryResultsSelector",
   get: (category: IconCategory) => ({ get }) => {
     const filteredResults = get(filteredQueryResultsSelector);