Additional setup

.storybook/main.cjs

@@ -1,3 +1,6 @@
+const { mergeConfig } = require( "vite")
+const svgr = require("vite-plugin-svgr");
+
 module.exports = {
   "stories": [
     "../src/**/*.stories.mdx",
@@ -6,7 +9,8 @@ module.exports = {
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
+    "@storybook/addon-interactions",
+    "storybook-addon-react-router-v6"
   ],
   "framework": "@storybook/react",
   "core": {
@@ -14,5 +18,8 @@ module.exports = {
   },
   "features": {
     "storyStoreV7": true
+  },
+  async viteFinal(config, {configType}) {
+    return mergeConfig(config, {plugins: [svgr()]})
   }
 }

package.json

@@ -11,8 +11,12 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
+    "framer-motion": "^7.5.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.1",
+    "storybook-addon-react-router-v6": "^0.2.1",
+    "vite-plugin-svgr": "^2.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",

src/assets/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>

src/assets/svgr-custom.d.ts

@@ -0,0 +1 @@
+export const ReactComponent: React.FunctionComponent<Component<React.SVGProps<SVGSVGElement>>> & { title?: string };

vite.config.ts

@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import svgr from "vite-plugin-svgr"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
+  plugins: [react(), svgr()]
 })