Use dedicated svg model for the Logitech Extreme 3D Pro joystick

src/components/joysticks/JoystickPS.vue

@@ -6,6 +6,7 @@
 import { v4 as uuid4 } from 'uuid'
 import { computed, onBeforeUnmount, ref, toRefs, watch } from 'vue'
 
+import { JoystickModel } from '@/libs/joystick/manager'
 import type { InputWithPrettyName } from '@/libs/joystick/protocols'
 import { scale } from '@/libs/utils'
 import { type JoystickInput, type ProtocolControllerMapping, JoystickAxis, JoystickButton } from '@/types/joystick'
@@ -19,6 +20,7 @@ const textColor = '#747474'
 enum Models {
   PS4 = 'PS4',
   PS5 = 'PS5',
+  LogitechExtreme3DPro = 'LogitechExtreme3DPro',
 }
 
 const buttonPath: { [key in JoystickButton]: string } = {
@@ -144,7 +146,8 @@ watch(
 )
 
 const joystick_svg_path = computed(() => {
-  return `/images/${props.model}.svg`
+  const svgModelFileName = props.model === JoystickModel.LogitechExtreme3DPro? 'LogitechExtreme3DPro' : 'PS4'
+  return `/images/${svgModelFileName}.svg`
 })
 
 watch(