🐛 Prevent SVG icons from leaking into DOM

[timroes]

What

Currently the SVG icons returned as a string as part of the connector spec where attached to the DOM using dangerouslySetInnerHTML. This lead to a couple of problems:

• styles defined in one SVG are attached to the regular DOM, thus will affect all other elements on the page. You can actually see that in action e.g. chosing the Cart.com icon. If you now open the source type selection (and thus render all other icons too), styles from another icon will suddenly overwrite the styles from the Cart.com icon.
  
• Unless we don't carefully inspect every svg icon we're adding, users would be able to inject "arbitraty" DOM into the page, thus offering an attack vector. I've checked all existing SVG icons and none of it injects anything dangerous so far.

How

Using a simple img tab where we set the SVG as a data URL on, will prevent both of those things from happening, since we don't allow DOM injection from SVG elements.

The only drawback would be, that icons can't make use of some form of SVG animations anymore, which as far as I could tell none of the icons tried to do (and I guess we anyway don't want them to do).

Side-Note

I'd personally have preferred to enable the react/no-danger linting rule to bring double care to all future dangerouslySetInnerHTML calls, but unfortunately the rule doesn't work together with styled components, which we are using.

[CLAassistant]

All committers have signed the CLA.

[jamakase]

Wow, Awesome!

I haven't even thought about such case.