Add React SVGR Support

Which version are you using? Ex. 1.19.2 1.28.1

Is the latest version affected? Yes

You can checkout latest version here

• Yes
• No

Which library are you using?

• Vanilla JS (tsparticles)
• React (react-tsparticles)
• Vue.js 2.x (particles.vue)
• Vue.js 3.x (particles.vue3)
• Angular (ng-particles)
• Svelte (svelte-particles)
• Preact (preact-particles)
• Inferno (inferno-particles)
• jQuery (jquery-particles)

tsParticles Configuration

const config: RecursivePartial<IOptions> = {
  fpsLimit: 60,
  interactivity: {
  	detectsOn: "canvas",
  	events: {
  		onClick: {
  			enable: true,
  			mode: "push",
  		},
  		onHover: {
  			enable: true,
  			mode: "repulse",
  		},
  		resize: true,
  	},
  	modes: {
  		bubble: {
  			distance: 400,
  			duration: 2,
  			opacity: 0.8,
  			size: 40,
  		},
  		push: {
  			quantity: 2,
  		},
  		repulse: {
  			distance: 200,
  			duration: 0.4,
  		},
  	},
  },
  particles: {
  	collisions: {
  		enable: false,
  	},
  	move: {
  		direction: "none",
  		enable: true,
  		outMode: "bounce",
  		random: true,
  		speed: 8,
  		straight: true,
  	},
  	number: {
  		density: {
  			enable: true,
  			value_area: 800,
  		},
  		value: 10,
  	},
  	opacity: {
  		value: 0.8,
  	},
  	shape: {
  		type: ["image"],
  		image: {
  			src: <MyCustomIcon className="text-primary" />,
  		},
  	},
  	size: {
  		random: true,
  		value: 50,
  	},
  },
  detectRetina: true,
}

Is your feature request related to a problem? Please describe.

The feature that I am requesting is nothing really serious but a great addition to the react-tsparticles library. If react-tsparticles could support SVGR(SVG React) then we can make the particles react to light mode /dark mode toggles.

For example, I have a custom Icon that will change color depending on whether light mode is turned on or dark mode is turned on.

Describe the solution you’d like The solution that I think is doable and easier to develop is to add the type component to shape.type and then add a new property to the shape called component which will take in a React.FC as a value.

Describe alternatives you’ve considered None as of now

Additional context

[utkarshk384]

Oh worked, Thank you

[utkarshk384]

@matteobruni Thank you for the quick fix. Now I am able to theme the particles depending on the theme system.