[Bug][Feature request] Color issue with multiple SVG, how to prevent conflicting id when importing svg in a web page?

[kopax]

Color issue with multiple SVG

I am importing multiple SVG all exported from illustrator. I got a color issues on all the svg that follow the first one that contains gradient.

	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="499.999" y1="122.8096" x2="499.999" y2="890.9918">
		<stop  offset="0" style="stop-color:#07002C"/>
		<stop  offset="1" style="stop-color:#0A2C60"/>
	</linearGradient>

The ID (and more) exist in other SVG's exported with illustrator, which cause the first one to be applied to all the others instead of their real color. In a web page, importing multiple SVGs can conflict.

Possible solution

• Puting the SVGs in a shadow DOM (might work, but not good)
• Embed the <svg /> into <object />, can this be activated with an option or be applied by default for all ReactComponent we import?
• svgo: It is a tool made with node, it contain apparently a 'cleanupIDs plugins with a prefix option that might help

Is this a problem svgr can already solved?

[gregberge]

Hello @kopax, SVGR already prefixes all IDs using SVGO, do you use CLI ? Webpack?

[kopax]

I use @svgr/webpack, through a non-ejected create-react-app (react-scripts v2.1.1).

I am importing a few SVG like this:

import { ReactComponent as CityBitexco } from '@svg-stock/www-assets/static/illustrations/landing/city/cityBitecxo.svg';
import { ReactComponent as CityBlock1 } from '@svg-stock/www-assets/static/illustrations/landing/city/cityBlock1.svg';
import { ReactComponent as CityBlock2 } from '@svg-stock/www-assets/static/illustrations/landing/city/cityBlock2.svg';
import { ReactComponent as CityBlock3 } from '@svg-stock/www-assets/static/illustrations/landing/city/cityBlock3.svg';
import { ReactComponent as CityBlock4 } from '@svg-stock/www-assets/static/illustrations/landing/city/cityBlock4.svg';
import { ReactComponent as CityBlock5 } from '@svg-stock/www-assets/static/illustrations/landing/city/cityBlock5.svg';
import { ReactComponent as CityChart } from '@svg-stock/www-assets/static/illustrations/landing/city/cityChart.svg';
import { ReactComponent as CityHelicopter } from '@svg-stock/www-assets/static/illustrations/landing/city/cityHelicopter.svg';
import { ReactComponent as CityLeaeftArm } from '@svg-stock/www-assets/static/illustrations/landing/city/cityLeaftArm.svg';
import { ReactComponent as CityMoneyDollar } from '@svg-stock/www-assets/static/illustrations/landing/city/cityMoneyDollar.svg';
import { ReactComponent as CityMoneyEuro } from '@svg-stock/www-assets/static/illustrations/landing/city/cityMoneyEuro.svg';
import { ReactComponent as CityMoneyPound } from '@svg-stock/www-assets/static/illustrations/landing/city/cityMoneyPound.svg';
import { ReactComponent as CityNumber1 } from '@svg-stock/www-assets/static/illustrations/landing/city/cityNumber1.svg';
import { ReactComponent as CityNumber2 } from '@svg-stock/www-assets/static/illustrations/landing/city/cityNumber2.svg';
import { ReactComponent as CityNumber3 } from '@svg-stock/www-assets/static/illustrations/landing/city/cityNumber3.svg';
import { ReactComponent as CityPalette } from '@svg-stock/www-assets/static/illustrations/landing/city/cityPalette.svg';
import { ReactComponent as CityStars } from '@svg-stock/www-assets/static/illustrations/landing/city/cityStars.svg';
import { ReactComponent as CityTable1 } from '@svg-stock/www-assets/static/illustrations/landing/city/cityTable1.svg';
import { ReactComponent as CityTable2 } from '@svg-stock/www-assets/static/illustrations/landing/city/cityTable2.svg';
import { ReactComponent as CityTable3 } from '@svg-stock/www-assets/static/illustrations/landing/city/cityTable3.svg';
import { ReactComponent as CityTotal } from '@svg-stock/www-assets/static/illustrations/landing/city/cityTotal.svg';
import { ReactComponent as CityTotalNoBg } from '@svg-stock/www-assets/static/illustrations/landing/city/cityTotalNoBg.svg';
import { ReactComponent as CityTotalCleared } from '@svg-stock/www-assets/static/illustrations/landing/city-animation/cityTotalCleared.svg';
import { ReactComponent as CityBg } from '@svg-stock/www-assets/static/illustrations/landing/city/cityBg.svg';
import { ReactComponent as CityWorldMap } from '@svg-stock/www-assets/static/illustrations/landing/city/cityWorldmap.svg';

I directly render the view with these components in my DOM.
Ids conflict between SVG, Is there another way than fixing manually and risking human mistake?

[gregberge]

Try upgrading svgr, it should solve your issue.

[kopax]

I am doing npm ls @svgr/webpack prior installing the plugin and I have nothing.

$ npm install --save-dev @svgr/webpack

I have in my package.json:

+  "@svgr/webpack": "^4.1.0",

Create react app v2.1.1 seems to be using v2.1.1 of @svgr/webpack:

Installing the latest version of @svgr/webpack now give this:

$ npm ls @svgr/webpack
[email protected] /home/dka/workspace/git.kopaxgroup.com/yeutech/www
└── @svgr/[email protected] 

• Issues isn't solve, how can I be sure that the non ejected app pick that version ?
• Is there another workaround for create-react-app ?

[gregberge]

There is no workaround, except waiting for an update or do not use create-react-app.

Anyway prefixing is automatically supported in latest versions of SVGR and it can be activated in SVGO config using older version (create-react-app prevents you from modifying any config, so if you use it you are stuck).

[kopax]

That makes it clear and time saving. I will try to use svgo prior using svg in react application in create-react-app until we got an updated version in create-react-app. We'd like to avoid ejecting everytime we have an issue and so far we are doing good.

[gregberge]

Yeah running SVGO before SVGR is a good workaround. Also it will run only one time if you commit your optimized SVGs!

[kopax]

Just updated svgr and I confirm this solved my issue.