SVG sprite support in vaadin-icon

[rolfsmeds]

Description

Support for SVG sprites in <vaadin-icon> WC / Flow SvgIcon / React <Icon> component.

SVG sprites are SVG files that bundle multiple SVG images wrapped into <symbol>s. The benefit of this over the existing iconset format is that it's a native SVG solution used e.g. by FontAwesome, is supported by several online sprite generators, and can utilize the SVG <use> element to render the same image in multiple locations without repeating the SVG code in each instance.

Acceptance criteria

• Support in vaadin-icon for rendering SVGs from an SVG sprite file
• API in the icon component for specifying a file path and the symbol ID
• Works with vaadin-icons placed inside a shadow root
• Default color and size match that of Vaadin Icons (provided that the SVG doesn't define a hardcoded fill color)
• Existing color and size APIs work as expected (provided that the SVG doesn't define a hardcoded fill color)

API

Web component

Icon SVG sprite: <vaadin-icon src="themes/my-theme/sprite.svg" symbol="badger">
Icon SVG sprite: <vaadin-icon src="themes/my-theme/sprite.svg#badger">

Flow component

Icon SVG sprite: new SvgIcon("themes/my-theme/sprite.svg", "badger")

General criteria

• APIs reviewed
• DX tests in Alpha
• Documentation
• Example Test page
• Limitations: SVG sprites from external sources not currently supported

Security

• Security implications have been taken into account (elaborate or link to product security requirement specification if there are implications)