Can't add more than one on page.

[pauldcollins]

I'm trying to import and display multiple SVGs in the same component, but it's actually just showing the first one duplicated every time, instead of two individual SVGs. Here is my code:

import React, { Component } from 'react';

import Account from '-!svg-react-loader!./svg/Account.svg';
import Alert from '-!svg-react-loader!./svg/Alert.svg';

<div className="col-lg-1">
  <Account className="icon iconAccount" />
</div>

<div className="col-lg-1">
  <Alert className="icon" />
</div>

Can we only have one instance of an SVG per page?

[kompot]

I guess you might be hitting this problem
svg/svgo#674
and this might be a solution
svg/svgo#674 (comment)

[pauldcollins]

Hi @kompot

Thanks for this, that is definitely a solution, and I'll implement it. Much appreciated.

In the meantime, I went through and saved out all the SVGs again from Illustrator (instead of Sketch), cleaning them up and removing the IDs - as they weren't needed.

Thanks for your help. I'll close this off now.
Paul