fix gatsby config for local storybook

found
gatsbyjs/gatsby#26099 (comment)

IsaiahByDayah/personal-site@202dc76

.storybook/main.js

@@ -23,9 +23,10 @@ module.exports = {
     ]
     config.resolve.mainFields = ["browser", "module", "main"]
 
-    // storybook handles svg with the file-loader which overrides our custom loaders, so remove it
+    // Workaround:
+    // storybook handles svg with the file-loader which overrides our custom loaders, so adapt rule, to ignore svg extension:
     config.module.rules = config.module.rules.map(rule => {
-      if (false && rule.test.toString().includes("svg")) {
+      if (rule.test.toString().includes("svg")) {
         const test = rule.test
           .toString()
           .replace("svg|", "")

package.json

@@ -61,8 +61,10 @@
     "build": "cp CNAME public/; npm run build:participants.json ; gatsby build;",
     "build:participants.json": "node scripts/concat-json.js ./participants public/participants.json; cp ./public/participants.json ./src/",
     "test": "mocha test",
-    "storybook": "NODE_ENV=production start-storybook -p 6006",
     "build-storybook": "build-storybook",
+    "storybook": "NODE_ENV=test start-storybook -p 6006 -s ./public",
+    "prestorybook": "npm run copy-static-queries",
+    "copy-static-queries": "cp -r ./public/page-data/sq/d ./public/static",
     "hygen": "hygen"
   },
   "author": "Robert Hostlowsky",

src/components/icon/icon.js

@@ -1,19 +1,23 @@
 import React from "react"
 
 const Icon = ({ className, source : Source }) => {
-debugger
   return (
   <svg
     className={className}
     version="1.1"
-    viewBox={Source.defaultProps?.viewBox}
+    viewBox={Source.defaultProps?.viewBox ?? Source.viewBox}
     width={Source.defaultProps?.width}
     height={Source.defaultProps?.height}
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
-    <Source />
-   </svg>
+      {
+        // Workaround for storybook
+        // in storybook, we only get a BrowserSpriteSVG object instead of
+        // a react component
+        Source.id ? <use xlinkHref={`#${Source.id}`} /> : <Source />
+      }
+  </svg>
 )
 }
 export default Icon