diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 1dec31c..dd76d6e 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,6 +1,7 @@
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";
@@ -15,6 +16,7 @@ const waitingFallback = ;
const App: React.FC = () => {
return (
+
diff --git a/src/components/Parameters/Parameters.tsx b/src/components/Parameters/Parameters.tsx
new file mode 100644
index 0000000..9421ef0
--- /dev/null
+++ b/src/components/Parameters/Parameters.tsx
@@ -0,0 +1,22 @@
+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;