Cannot import SVG dynamic using React

Question

I tried the below code to import SVG dynamically.

let selectedFloor = require('../svg/floor1.svg');
this.setState({
  SvgMap : selectedFloor
})

render() {
  return (
    <div>
      <span dangerouslySetInnerHTML={{ __html: this.state.SvgMap }} />
    </div>
  );

Result:

You probably need to look into whatever you're using to transpile your js. For example if you're using webpack you may need to setup a loader to handle svg and make it part of your built app. — dougajmcdonald
– dougajmcdonald, Commented Aug 5, 2018 at 10:58
thanks for you replay, this is constructor : constructor() { super(); this.state = { SvgMap :"" } } — Kamal Benbrahim
– Kamal Benbrahim, Commented Aug 5, 2018 at 11:00

its4zahoor · Accepted Answer · 2019-10-03 09:12:40Z

1

Try using like this:

<span dangerouslySetInnerHTML={{ __html: `<img src=${this.state.SvgMap} />` }} />

edited Oct 3, 2019 at 9:12

its4zahoor

1,8211 gold badge17 silver badges23 bronze badges

answered Aug 5, 2018 at 11:07

Aliaksandr Pitkevich

8098 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter Mortensen · Accepted Answer · 2018-08-05 19:36:29Z

0

I think you should use the img tag, and you can keep the path to the SVG file in the state, or only the name.

const selectedFloor = 'floor1.svg';
this.setState({
    SvgMap : selectedFloor
});

render() {   
    return (
      <div>
          <img src={`../svg/${this.state.SvgMap}`}
      </div>
    );
}

edited Aug 5, 2018 at 19:36

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 5, 2018 at 11:16

naortor

2,09714 silver badges26 bronze badges

Collectives™ on Stack Overflow

Cannot import SVG dynamic using React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related