React doesn't render a SVG

Question

Hi I created a template in React that use a Object to fill it. But the SVG is not rendered and I don't know why. The path of the folder and de svg image is all correct.

Here is the object:

export const homeObjOne = {
    id: 'about',
    lightBg: false,
    lightText: true,
    lightTextDesc: true,
    topLine: 'Gym Application',
    headLine: 'For Our Fitness Lovers',
    description: 'Lorem',
    buttonLabel: 'Get started',
    imgStart: false,
    img: require('../../images/svg-1.svg'),
    alt: 'Growth',
    dark: true,
    primary: true,
    darkText: false
};

And here is the template where de object is passed:

const InfoSection = ({
  lightBg,
  id,
  imgStart,
  topLine,
  lightText,
  headline,
  darkText,
  description,
  buttonLabel,
  img,
  alt,
  primary,
  dark,
  dark2
}) => {
  return (
    <Img src={img} alt={alt} />
 );
};

export default InfoSection;

I have only writed the essential code because is more easy to read and answer the question. The app doesn't send any error about htat the path or de svg-1.svg doesn't exist, and all the other components of the object are rendered well so I don't know what's going wrong.

If anyone could help me, please let me knonw. Thanks!

Did you create the app using create-react-app? if so you can try import { svgImage as ReactComponent } from './svgImage' — dee, Jun 29 '21 at 14:36
https://stackoverflow.com/questions/42296499/how-to-display-svg-icons-svg-files-in-ui-using-react-component — dee, Jun 29 '21 at 14:38
Does this answer your question? [How to display svg icons(.svg files) in UI using React Component?](https://stackoverflow.com/questions/42296499/how-to-display-svg-icons-svg-files-in-ui-using-react-component) — dee, Jun 29 '21 at 14:39

score 1 · Accepted Answer · answered Jun 29 '21 at 14:35

1

import imgUrl from '../../images/svg-1.svg';

export const homeObjOne = {
    id: 'about',
    lightBg: false,
    lightText: true,
    lightTextDesc: true,
    topLine: 'Gym Application',
    headLine: 'For Our Fitness Lovers',
    description: 'Lorem',
    buttonLabel: 'Get started',
    imgStart: false,
    img: imgUrl,
    alt: 'Growth',
    dark: true,
    primary: true,
    darkText: false
};

This should work. Here you can check the reasons: https://create-react-app.dev/docs/adding-images-fonts-and-files/

answered Jun 29 '21 at 14:35

szilagyi.sandor

204
1
6

Do you have to import the svg outside the component and have it / them all in the bundle? I want to get a svg from a s3 bucket, but i won't have the url until the code runs / i dont want all the svgs imported - so would need to be imported in the component - any ideas? – Jeremy Dec 17 '21 at 11:16

React doesn't render a SVG

1 Answers1