diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index dd76d6e..4bfd6e9 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,22 +1,22 @@
import React, { Suspense } from "react";
import "./App.css";
-import Parameters from "../Parameters/Parameters";
import Header from "../Header/Header";
import Toolbar from "../Toolbar/Toolbar";
import IconGrid from "../IconGrid/IconGrid";
import Footer from "../Footer/Footer";
import ErrorBoundary from "../ErrorBoundary/ErrorBoundary";
import Notice from "../Notice/Notice";
+import useIconParameters from "../../hooks/useIconParameters";
const errorFallback = ;
-// const waitingFallback = ;
const waitingFallback = ;
const App: React.FC = () => {
+ useIconParameters();
+
return (
-
diff --git a/src/components/Parameters/Parameters.tsx b/src/components/Parameters/Parameters.tsx
deleted file mode 100644
index 9421ef0..0000000
--- a/src/components/Parameters/Parameters.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { useEffect } from "react";
-import { useSearchParam } from "react-use";
-import { useSetRecoilState } from "recoil";
-import TinyColor from "tinycolor2";
-
-import { iconColorAtom } from "../../state/atoms";
-
-const Parameters: React.FC<{}> = () => {
- const color = useSearchParam("color")?.replace(/["']/g, "");
- const setColor = useSetRecoilState(iconColorAtom);
-
- useEffect(() => {
- if (color) {
- const normalizedColor = TinyColor(color);
- if (normalizedColor.isValid()) setColor(normalizedColor.toHexString());
- }
- }, [color, setColor]);
-
- return null;
-};
-
-export default Parameters;
diff --git a/src/hooks/useIconParameters.ts b/src/hooks/useIconParameters.ts
new file mode 100644
index 0000000..b2881bf
--- /dev/null
+++ b/src/hooks/useIconParameters.ts
@@ -0,0 +1,37 @@
+import { useEffect } from "react";
+import { useSearchParam } from "react-use";
+import { useSetRecoilState } from "recoil";
+import TinyColor from "tinycolor2";
+import { iconColorAtom, iconWeightAtom, iconSizeAtom } from "../state/atoms";
+import { IconStyle } from "../lib";
+
+export default () => {
+ const weight = useSearchParam("weight")?.replace(/["']/g, "");
+ const size = useSearchParam("size")?.replace(/["']/g, "");
+ const color = useSearchParam("color")?.replace(/["']/g, "");
+
+ const setColor = useSetRecoilState(iconColorAtom);
+ const setWeight = useSetRecoilState(iconWeightAtom);
+ const setSize = useSetRecoilState(iconSizeAtom);
+
+ useEffect(() => {
+ if (weight) {
+ if (weight.toUpperCase() in IconStyle) setWeight(weight as IconStyle);
+ }
+ }, [weight, setWeight]);
+
+ useEffect(() => {
+ if (size) {
+ const normalizedSize = parseInt(size);
+ if (typeof normalizedSize === "number" && isFinite(normalizedSize))
+ setSize(Math.min(Math.max(normalizedSize, 16), 96));
+ }
+ }, [size, setSize]);
+
+ useEffect(() => {
+ if (color) {
+ const normalizedColor = TinyColor(color);
+ if (normalizedColor.isValid()) setColor(normalizedColor.toHexString());
+ }
+ }, [color, setColor]);
+};