I recently saw traced SVG image loading in gatsby.js

https://medium.com/workshop-me/traced-svg-images-for-excellent-ux-d75a6bb4caed

Is there any way in which i can implement this in create-react-app, with automation. Right now, I use create-react-app and cloudinary. I store the url in my database, I couldn't find a good resource through which I can make this happen. Help would be appreciated.

1 Answers

0
Fernando Montoya On

If you read the post and what it uses, you find that it uses https://github.com/lovell/sharp, which accepts an image as parameter, in your case you can download the image, apply the filter and finally use the most important part of this technique:

<div
      style={{
        backgroundImage: `url("${realUrl}"), url("${
          tracedSVG
        }")`,
      }}
    />
  </div>

Then the browser will do the dynamic load for you.