[Feature Request] - Add API prop to prefix style declarations exported by Adobe Illustrator

[jaegz]

Really digging react-svg! However, I've run into a problem which requires a manual process to correct. When a designer hands over svgs exported from Adobe Illustrator - the generated styles have matching selectors - which causes colors to "spill over" into other svgs. If this component had an api option that steps through and prepends these styles with the something like the svg filename or even a custom string that would be awesome. Right now I have to manually adjust each svg so the styles dont clash and recolor other svgs. I'm sure many users would benefit from this feature.

[tanem]

Hey @jaegz. I see this as more of a build time / preprocessing step, rather than something that should be added to react-svg.

Some options I can think of:

• Changing the export process somehow, so instead of specifying fill via CSS, it gets specified via the fill attribute on the required elements. I'm not sure how to do this with Illustrator off the top of my head.
• Cleaning up the SVGs via a build tool or script. Under the hood it would probably delegate to svgo. I actually recommend doing this anyway, otherwise you'll probably end up with a bunch more cruft in your SVGs.
• Manually adjusting things like you're doing, which gets annoying and doesn't scale well. This would be my least preferred option.

Out of curiosity, any chance you can paste that content into a comment so I can copy it? Wouldn't mind playing around with a couple things anyway.

[jaegz]

Hi @tanem thanks for getting back to me and I see what you're saying.

• It would be great if Illustrator took the layer name and used that as the class name.
• Definitely going to have a look at svgo, thanks for the suggestion.
• This is what I've went with for now. Luckily the svgs I'm currently dealing with aren't super complex and Sublime's Emmet is handy here.

Here's the svg content from the screenshot.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 161.2 126.8" style="enable-background:new 0 0 161.2 126.8;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#F1F1F1;}
	.st1{fill:#2E87B0;}
	.st2{fill:#256475;}
	.st3{fill:#BFBFBF;}
	.st4{fill:#0A3C53;}
	.st5{fill:#9FA19E;}
</style>
<g>
	<path class="st0" d="M161.2,39.9H0v81.5c0,1.4,0.5,2.8,1.6,3.8c1,1,2.4,1.6,3.8,1.6h150.5c1.4,0,2.8-0.5,3.8-1.6
		c1-1,1.6-2.4,1.6-3.8V39.9z"/>
	<path class="st1" d="M161.2,26.3c0-1.4-0.5-2.8-1.6-3.8c-1-1-2.4-1.6-3.8-1.6H5.4c-1.4,0-2.7,0.5-3.8,1.6c-1,1-1.6,2.4-1.6,3.8
		v13.6h161.2V26.3z"/>
	<path class="st2" d="M98.5,30.4c0-2-1.6-3.6-3.6-3.6H66.3c-2,0-3.6,1.6-3.6,3.6l0,0c0,2,1.6,3.6,3.6,3.6h28.7
		C96.9,34,98.5,32.4,98.5,30.4L98.5,30.4z"/>
	<g>
		<g>
			<rect x="12.6" y="52.6" class="st3" width="61.6" height="61.6"/>
			<g>
				<path class="st4" d="M43.4,93.2c-10.5,0-19,9.4-19,21h38.1C62.5,102.6,53.9,93.2,43.4,93.2z"/>
				<path class="st4" d="M54.9,78.2c0,6.3-5.1,11.4-11.5,11.4c-6.2,0-11.4-5.1-11.4-11.4c0-6.3,5.1-11.4,11.4-11.4
					C49.8,66.8,54.9,71.9,54.9,78.2z"/>
			</g>
		</g>
		<g>
			<rect x="86.9" y="109.5" class="st3" width="30.8" height="4.7"/>
			<rect x="86.9" y="100" class="st3" width="61.6" height="4.7"/>
			<rect x="86.9" y="90.5" class="st3" width="61.6" height="4.7"/>
			<rect x="86.9" y="81" class="st3" width="61.6" height="4.7"/>
		</g>
		<rect x="86.9" y="52.6" class="st4" width="61.6" height="14.2"/>
	</g>
	<path class="st5" d="M88.2,3.1C86.1,1,83.4,0,80.6,0c-2.8,0-5.5,1-7.6,3.1c-2.1,2.1-3.1,4.8-3.1,7.6v19.7h21.5V10.7
		C91.3,8,90.3,5.2,88.2,3.1z M80.6,15.2c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5c2.5,0,4.5,2,4.5,4.5
		C85.1,13.2,83.1,15.2,80.6,15.2z"/>
</g>
</svg>

[tanem]

@jaegz cool.

Just did some digging, apparently in Illustrator there's a CSS properties option you can change when exporting SVGs: http://articles.dappergentlemen.com/2014/12/17/demystifying-illustrator-svg-css/. Hopefully you can use that to stop output of the external style element, and instead output inline styles so they don't leak everywhere.

I think the above in combination with svgo - plus perhaps one or two plugins - will get your SVGs to a decent point, before react-svg does it's loading.

Anyway, will close the issue for now. All the best 👍

[jaegz]

@tanem Thanks for the extra details on exporting out of Illustrator and going out of your way to do some digging!