search

jhamlet / svg-react-loader

Webpack SVG to React Component Loader
MIT License
559 stars 82 forks source link

Can't add more than one on page. #87

Closed pauldcollins closed 6 years ago

pauldcollins commented 6 years ago

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 commented 6 years ago

I guess you might be hitting this problem https://github.com/svg/svgo/issues/674 and this might be a solution https://github.com/svg/svgo/issues/674#issuecomment-324193597

pauldcollins commented 6 years ago

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