selectors: rename iconStyleAtom -> iconWeightAtom

src/components/IconGrid/IconGrid.tsx

@@ -4,19 +4,19 @@ import { motion, useAnimation } from "framer-motion";
 import { useWindowSize } from "react-use";
 import { IconContext } from "phosphor-react";
 
-import { iconStyleAtom, iconSizeAtom, iconColorAtom } from "../../state/atoms";
+import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "../../state/atoms";
 import {
   filteredQueryResultsSelector,
   isDarkThemeSelector,
 } from "../../state/selectors";
-import GridItem from "./IconGridItem";
+import IconGridItem from "./IconGridItem";
 import Warn from "../Warn/Warn";
 import "./IconGrid.css";
 
 type IconGridProps = {};
 
 const IconGrid: React.FC<IconGridProps> = () => {
-  const weight = useRecoilValue(iconStyleAtom);
+  const weight = useRecoilValue(iconWeightAtom);
   const size = useRecoilValue(iconSizeAtom);
   const color = useRecoilValue(iconColorAtom);
   const isDark = useRecoilValue(isDarkThemeSelector);
@@ -48,7 +48,7 @@ const IconGrid: React.FC<IconGridProps> = () => {
           variants={{}}
         >
           {filteredQueryResults.map((iconEntry, index) => (
-            <GridItem
+            <IconGridItem
               key={index}
               index={index}
               spans={spans}

src/components/IconGrid/InfoPanel.tsx

@@ -5,7 +5,7 @@ import { saveAs } from "file-saver";
 import { Icon, Copy, X, CheckCircle, ArchiveDiskDot } from "phosphor-react";
 
 import {
-  iconStyleAtom,
+  iconWeightAtom,
   iconSizeAtom,
   iconColorAtom,
   iconPreviewOpenAtom,
@@ -37,7 +37,7 @@ interface InfoPanelProps {
 
 const InfoPanel: React.FC<InfoPanelProps> = (props) => {
   const { index, spans, isDark, name, Icon } = props;
-  const weight = useRecoilValue(iconStyleAtom);
+  const weight = useRecoilValue(iconWeightAtom);
   const size = useRecoilValue(iconSizeAtom);
   const color = useRecoilValue(iconColorAtom);
   const setOpen = useSetRecoilState(iconPreviewOpenAtom);

src/components/StyleInput/StyleInput.tsx

@@ -3,7 +3,7 @@ import { useSetRecoilState } from "recoil";
 import Select from "react-dropdown-select";
 import { PencilLine } from "phosphor-react";
 
-import { iconStyleAtom } from "../../state/atoms";
+import { iconWeightAtom } from "../../state/atoms";
 import { IconStyle } from "../../lib";
 import "./StyleInput.css";
 
@@ -45,7 +45,7 @@ const options: WeightOption[] = [
 type StyleInputProps = {};
 
 const StyleInput: React.FC<StyleInputProps> = () => {
-  const setStyle = useSetRecoilState(iconStyleAtom);
+  const setStyle = useSetRecoilState(iconWeightAtom);
 
   const handleStyleChange = (values: WeightOption[]) =>
     setStyle(values[0].value as IconStyle);

src/state/atoms.ts

@@ -6,8 +6,8 @@ export const searchQueryAtom = atom<string>({
   default: "",
 });
 
-export const iconStyleAtom = atom<IconStyle>({
-  key: "styleQueryAtom",
+export const iconWeightAtom = atom<IconStyle>({
+  key: "iconWeightAtom",
   default: IconStyle.REGULAR,
 });