Canvas: Avoid conflicting stylesheets when loading SVG icons

[adela-almasan]

While investigating https://github.com/grafana/support-escalations/issues/7316 we noticed that the SVGs used had the same class names defined between the <style> tag, which was causing the SVGs to borrow styling from one to another. The issue doesn't happen for SVGs that don't have custom styling defined.
The solution was to add a unique ID to each SVG and use the ID when defining the classes.

Before

svgs_before.mov

After

svgs_after.mov

Fixes https://github.com/grafana/support-escalations/issues/7316

Special notes for your reviewer:
Cases covered:

• add new ID to SVG when not defined
• if ID is defined, use it/overwrite the existing one in <style>

Please check that:

• It works as expected from a user's perspective.
• If this is a pre-GA feature, it is behind a feature toggle.
• The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

[adela-almasan]

tested in Geomap and it doesn't seem to be affected, the markers are keeping their colors, as their should. However, I can't use the SVGs from the escalation, not sure if there's something wrong with them - but they don't work regardless of my changes. @drew08t any idea?

geomap_svg.mov

[nmarrs]

A few nits - overall looks good and tested locally 💯