feat(): add support for a custom image for the dev tools trigger

Author: jakiestfu

packages/devtools/src/components/trigger.tsx

@@ -8,9 +8,11 @@ import type { Accessor } from 'solid-js'
 export const Trigger = ({
   isOpen,
   setIsOpen,
+  image = TanStackLogo,
 }: {
   isOpen: Accessor<boolean>
   setIsOpen: (isOpen: boolean) => void
+  image: string
 }) => {
   const { settings } = useDevtoolsSettings()
   const styles = useStyles()
@@ -28,7 +30,7 @@ export const Trigger = ({
       class={buttonStyle()}
       onClick={() => setIsOpen(!isOpen())}
     >
-      <img src={TanStackLogo} alt="TanStack Logo" />
+      <img src={image || TanStackLogo} alt="TanStack Devtools" />
     </button>
   )
 }

packages/devtools/src/context/devtools-store.ts

@@ -61,6 +61,11 @@ export type DevtoolsStore = {
      * @default "dark"
      */
     theme: 'light' | 'dark'
+    /**
+     * The image used for the dev tools trigger
+     * @default TanStackLogo
+     */
+    triggerImage: string
   }
   state: {
     activeTab: TabName
@@ -86,6 +91,7 @@ export const initialState: DevtoolsStore = {
       window.matchMedia('(prefers-color-scheme: dark)').matches
         ? 'dark'
         : 'light',
+    triggerImage: "",
   },
   state: {
     activeTab: 'plugins',

packages/devtools/src/devtools.tsx

@@ -201,7 +201,7 @@ export default function DevTools() {
                   : true
             }
           >
-            <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />
+            <Trigger isOpen={isOpen} setIsOpen={toggleOpen} image={settings().triggerImage} />
             <MainPanel isResizing={isResizing} isOpen={isOpen}>
               <ContentPanel
                 ref={(ref) => (panelRef = ref)}

packages/devtools/src/tabs/settings-tab.tsx

@@ -71,6 +71,13 @@ export const SettingsTab = () => {
             }
             checked={settings().hideUntilHover}
           />
+          <Input
+            label="Trigger Image"
+            description="Specify the URL of the image to use for the trigger"
+            value={settings().triggerImage}
+            placeholder="Default TanStack Logo"
+            onChange={(value) => setSettings({ triggerImage: value })}
+          />
           <Select
             label="Theme"
             description="Choose the theme for the devtools panel"