I have a svg image that contains some shadows on several elements and it works nicely in a django project. I now included that in my react.js project and it suddenly drops weird shadows. Why's that and where to fix this in react?
// Landing.js
import Body from './Body'
import { ReactComponent as Logo } from '../../assets/images/illu_how.svg'
import React from "react";
import './Landing.css'
function Landing(props) {
return (
<Body>
<div className="image-wrapper animate__animated animate__fadeInRight"><Logo classname="illu_how" /></div>
</Body>
JS fiddle due to SO character limitation
React.js project:
Django project:
I got it finally... the issue was the import
import { ReactComponent as Logo } from '../../assets/images/illu_how.svg'
that caused the shadow problem for whatever reason.
This works just fine:
import illustration from '../../assets/images/illu_how.svg'