feat: rotating mask

[ink-victor]

• Configures the rotating mask on the demo nav icon

Screen.Recording.2024-11-21.at.15.29.33.mov

[aws-amplify-eu-west-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-25.d2yrqj5dnlvopf.amplifyapp.com

[fran-ink]

Only works on the first instance of the icon since your SVG includes ids, which should be unique through the page.

I used to fix this by including a "GlobalSvgStuff" component that adds all those things that should be unique, but it seems very annoying for a library...

Not sure if we can generate a unique ID in the svg file...? 😓

[fran-ink]

Also, your SVG file is invalid and it should stay valid.

If you want to wrap it in a div, I'd rather wrap it in a specific InkPlaceholderLogo component that adds the <div class="ink-group" thing

[ink-victor]

Closing this PR as we're not sure the rotating mask will actually be part of the final designs. We can open the PR back up if we need.