Gatsby: "react-particles-js" how to use SVG-image

[lesleyNilson]

I try to insert an SVG-image in my component create with "react-particles-js". But this is not working in Gatsby. Can anybody help?

import React from "react";
import Particles from "react-particles-js";
import "./myparticle.scss";

const MyParticle = () => (
  <Particles className={'dev'}
             params={{
               "particles": {
                 "shape":{
                   "type":["image"],
                   "image": {
                     "src": "./my-image.svg",
                     "width": 100,
                     "height": 100
                   }
                 }
               }
             }}
  />
);

export default MyParticle;

[sidharthachatterjee]

This is because the library likely doesn't support server side rendering. Please open an issue in https://github.com/Wufe/react-particles-js

You can also use something like react-loadable to load libraries only in the client side (so that it works with Gatsby)

Find an example at https://github.com/fabe/gatsby-react-loadable

Closing this since it isn't a Gatsby issue but hope this helps you! 🙂

[lindelof]

I think you can try another library and he can also achieve your effect. very simple

https://github.com/lindelof/particles-bg