ft: WIP: Ft use svg

[advl]

Done

A work-in progress PR displaying a PoC to leverage <svg><use> as a way to consume SVG sprites.

The trick of the sprites is to include several groups in the svg, and display only the targetted one (sprite.svg#my-icon-name).

A second minor feature is included : a PoC of SVG theming using intent colors. The last story, Illustration displays this concept.
In case we would like to proceed with this approach, it would only be necessary to refine the API of the component.
A third minor feature is included : the ability to programatically animate strokes of SVGs.

QA

Code Q/A :

• Look at sprite.svg using the source diff.
• Q/A the component api.

Visual Q/A :

• Go to the design system package
• Run Storybook
• Look at the stories. Try to change the intents applied (negative <> positive). This should work on all stories.

PR readiness check

• PR should have one of the following labels:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• All packages define the required scripts in package.json:
  • All packages: check and check:fix.
  • Packages with a build step: build.

Screenshots

[if relevant, include a screenshot or screen capture]

[jmuzina]

In case we would like to proceed with this approach, it would only be necessary to refine the API of the component.

What do you see being refined about the component's API?

[advl]

Make it configurable for plausible usage, ie, the width, the height. Rework the name of the props, the defaults.
I also wonder whether to split the wrapper (SVG) and "use" into two components (in case we'd like to consume several sprites together)
Open to additional ideas as well