Add sample icons and refactor Icon interface

src/components/IconGrid/IconGrid.tsx

@@ -12,9 +12,9 @@ const IconGrid: React.FC<IconGridProps> = () => {
   return (
     <div className="grid">
       {filteredQueryResults.map((icon) => (
-        <div key={`${icon.name}-${icon.style.type.toString()}`} className="grid-item">
+        <div key={`ph-${icon.name}-${icon.style}`} className="grid-item">
           <img
-            src="https://i.imgur.com/zaO12Y8m.jpeg"
+            src={icon.asset}
             alt={`${icon.name} icon`}
             width="100%"
           />

src/components/IconSearch/IconSearch.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useRecoilState } from "recoil";
 
 import { searchQueryAtom, styleQueryAtom } from "../../state/atoms";
-import { IconFillStyle } from "../../lib/Icon";
+import { IconStyle } from "../../lib/Icon";
 
 type IconSearchProps = {};
 
@@ -15,7 +15,7 @@ const IconSearch: React.FC<IconSearchProps> = () => {
   };
 
   const handleStyleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setStyle(event.target.value as IconFillStyle);
+    setStyle(event.target.value as IconStyle);
   };
 
   return (
@@ -23,9 +23,12 @@ const IconSearch: React.FC<IconSearchProps> = () => {
       <input value={query} onChange={handleSearchChange} />
       <select value={style?.toString()} onChange={handleStyleChange}>
         <option value={""}>All</option>
-        <option value={IconFillStyle.LINE}>Line</option>
-        <option value={IconFillStyle.FILL}>Fill</option>
-        <option value={IconFillStyle.DUOTONE}>Duotone</option>
+        <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>
     </>
   );

src/data/iconList.ts

@@ -1,94 +0,0 @@
-import { Icon, IconCategory, IconFillStyle } from "../lib/Icon";
-
-export const ICON_LIST: Icon[] = [
-  {
-    name: "arrow-up",
-    style: { type: IconFillStyle.LINE, weight: "light" },
-    categories: [
-      IconCategory.DESIGN,
-      IconCategory.EDITOR,
-      IconCategory.SYSTEM,
-      IconCategory.OTHER,
-    ],
-    tags: ["point", "pointer", "direction"],
-  },
-  {
-    name: "arrow-down",
-    style: { type: IconFillStyle.LINE, weight: "light" },
-    categories: [
-      IconCategory.DESIGN,
-      IconCategory.EDITOR,
-      IconCategory.SYSTEM,
-      IconCategory.OTHER,
-    ],
-    tags: ["point", "pointer", "direction"],
-  },
-  {
-    name: "arrow-left",
-    style: { type: IconFillStyle.LINE, weight: "light" },
-    categories: [
-      IconCategory.DESIGN,
-      IconCategory.EDITOR,
-      IconCategory.SYSTEM,
-      IconCategory.OTHER,
-    ],
-    tags: ["point", "pointer", "direction"],
-  },
-  {
-    name: "arrow-right",
-    style: { type: IconFillStyle.LINE, weight: "light" },
-    categories: [
-      IconCategory.DESIGN,
-      IconCategory.EDITOR,
-      IconCategory.SYSTEM,
-      IconCategory.OTHER,
-    ],
-    tags: ["point", "pointer", "direction"],
-  },
-  {
-    name: "house",
-    style: { type: IconFillStyle.FILL },
-    categories: [IconCategory.MAP, IconCategory.OTHER],
-    tags: ["building", "home", "place", "apartment"],
-  },
-  {
-    name: "hospital",
-    style: { type: IconFillStyle.FILL },
-    categories: [IconCategory.MAP, IconCategory.HEALTH, IconCategory.OTHER],
-    tags: ["building", "doctor", "place", "treatment"],
-  },
-  {
-    name: "mail",
-    style: { type: IconFillStyle.FILL },
-    categories: [IconCategory.BUSINESS, IconCategory.SYSTEM],
-    tags: ["email", "letter", "message", "messaging", "send"],
-  },
-  {
-    name: "mail",
-    style: { type: IconFillStyle.DUOTONE },
-    categories: [
-      IconCategory.BUSINESS,
-      IconCategory.COMMUNICATION,
-      IconCategory.SYSTEM,
-    ],
-    tags: ["email", "letter", "message", "messaging", "send"],
-  },
-  {
-    name: "chat",
-    style: { type: IconFillStyle.DUOTONE },
-    categories: [IconCategory.COMMUNICATION, IconCategory.SYSTEM],
-    tags: ["message", "messaging", "send"],
-  },
-  {
-    name: "chat",
-    style: { type: IconFillStyle.FILL },
-    categories: [IconCategory.COMMUNICATION, IconCategory.SYSTEM],
-    tags: ["message", "messaging", "send"],
-  },
-  // {
-  //   name: "",
-  //   style: IconFillStyle.FILL,
-  //   categories: [],
-  //   tags: [],
-  // },
-];

src/lib/Icon.ts

@@ -1,10 +1,8 @@
-export interface IconStyle {
-  type: IconFillStyle;
-  weight?: "light" | "regular" | "medium" | "bold";
-}
-
-export enum IconFillStyle {
-  LINE = "line",
+export enum IconStyle {
+  THIN = "thin",
+  LIGHT = "light",
+  REGULAR = "regular",
+  BOLD = "bold",
   FILL = "fill",
   DUOTONE = "duotone",
 }
@@ -20,7 +18,6 @@ export enum IconCategory {
   EDITOR = "Editor",
   FINANCE = "Finance",
   HEALTH = "Health & Medical",
-  LOGOS = "Logos",
   MAP = "Map",
   MEDIA = "Media",
   SYSTEM = "System",
@@ -34,4 +31,5 @@ export interface Icon {
   style: IconStyle;
   categories: IconCategory[];
   tags: string[];
+  asset: string;
 }

src/state/atoms.ts

@@ -1,5 +1,5 @@
 import { atom } from "recoil";
-import { IconFillStyle } from "../lib/Icon";
+import { IconStyle } from "../lib/Icon";
 
 /**
  * ATOM
@@ -8,14 +8,12 @@ import { IconFillStyle } from "../lib/Icon";
  * updates will result in a re-render of all components subscribed to that atom:
  */
 
-export type IconStyleQuery = IconFillStyle | null | undefined;
-
 export const searchQueryAtom = atom<string>({
   key: "searchQueryAtom",
   default: "",
 });
 
-export const styleQueryAtom = atom<IconStyleQuery>({
+export const styleQueryAtom = atom<IconStyle>({
   key: "styleQueryAtom",
-  default: undefined,
+  default: IconStyle.REGULAR,
 });

src/state/selectors.ts

@@ -1,7 +1,7 @@
 import { selector } from "recoil";
-import { searchQueryAtom, styleQueryAtom, IconStyleQuery } from "./atoms";
-import { ICON_LIST as list } from "../data/iconList";
-import { Icon } from "../lib/Icon";
+import { searchQueryAtom, styleQueryAtom } from "./atoms";
+import { iconList } from "../lib/iconList";
+import { Icon, IconStyle } from "../lib/Icon";
 
 /**
  * SELECTOR
@@ -14,16 +14,12 @@ const isQueryMatch = (icon: Icon, query: string): boolean => {
   return (
     icon.name.includes(query) ||
     icon.tags.some((tag) => tag.toLowerCase().includes(query)) ||
-    icon.categories.some((category) =>
-      category.toLowerCase().includes(query)
-    ) ||
-    icon.style.type.toString().includes(query) ||
-    !!icon.style.weight?.includes(query)
+    icon.categories.some((category) => category.toLowerCase().includes(query))
   );
 };
 
-const isStyleMatch = (icon: Icon, style: IconStyleQuery): boolean => {
-  return !style || icon.style.type === style;
+const isStyleMatch = (icon: Icon, style?: IconStyle): boolean => {
+  return !style || icon.style === style;
 };
 
 export const filteredQueryResultsSelector = selector({
@@ -32,9 +28,9 @@ export const filteredQueryResultsSelector = selector({
     const query = get(searchQueryAtom).trim().toLowerCase();
     const style = get(styleQueryAtom);
 
-    if (!query && !style) return list;
+    if (!query && !style) return iconList;
 
-    return list.filter((icon) => {
+    return iconList.filter((icon) => {
       return isStyleMatch(icon, style) && isQueryMatch(icon, query);
     });
   },