Can you have more than one SVG on a page? (using svg-react-loader)

Question

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" />
</div>

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

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

Answer 1

For anyone reading this. It appears Sketch was saving the SVGs out with the same id - "#path-1", which was breaking when there were multiple on the page. So, the answer is they need a unique ID. Precisely changing the patternId at 2 places within the SVG file will solve the problem.