Support custom SVG icon in property actions

[bjarnef]

Prerequisites

• I have added steps to test this contribution in the description below

Description

This is a new PR of closed #10928 to v9.

Currently this introduce a breaking change to specify full icon name (like in most other part of UI). Alternatively we could use the approach in #10928 with a useLegacyIcon property to make it work with current icons and full icon name.

At the moment it is assumed the icon (font icon or SVG icon) always is prefixed with icon- which is not always the case and not a requirement in other part of the UI).

[umbrabot]

Hi there @bjarnef, thank you for this contribution! 👍

While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:

• It's clear what problem this is solving, there's a connected issue or a description of what the changes do and how to test them
• The automated tests all pass (see "Checks" tab on this PR)
• The level of security for this contribution is the same or improved
• The level of performance for this contribution is the same or improved
• Avoids creating breaking changes; note that behavioral changes might also be perceived as breaking
• If this is a new feature, Umbraco HQ provided guidance on the implementation beforehand
• The contribution looks original and the contributor is presumably allowed to share it

Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution.

If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[bjarnef]

It updates existing icons in b3581d9

However still a breaking change if developers use the component in packages or used by other Umbraco packages like Umbraco Forms.

It would still be great to support SVG icons, which could be useful in Vendr by @mattbrailsford

Maybe @nielslyngsoe or @madsrasmussen has thoughts on this. Do we want a breaking changes e.g. in v10 or should we make it backward compatible?

[bjarnef]

@nul800sebastiaan @bergmania could we make these breaking changes now we have the chance in v10? 😎
Alternative I can make it backward compatible as previous PRs, but it is not pretty and will most likely require a property to specify whether legacy or new format should be used.

In fact these two places are the only I have found, where it doesn't specify full icon name.

[bjarnef]

@nul800sebastiaan @bergmania could we make these breaking changes in v10.. or should we wait for v11?
Let me know if want a different solution, but it would be great if we can use custom icons in menu actions and property actions 🤞

[nul800sebastiaan]

Thanks again @bjarnef - while we are technically allowed to break it in v10, we would like to work on how we announce breaking changes first. Currently it's just going to show up as something that package developers "need to know about", which is something we want to make easier to learn about first. So for now I don't feel like we should break it in v10, we'd love it if you could update it to be backwards compatible indeed, with a useLegacyIcon. Thanks in advance! 🙏

[bjarnef]

Hi @nul800sebastiaan

Sure, I'll update the two PR's with a useLegacyIcon to make it backwards compatible.

[bjarnef]

@nul800sebastiaan this should be updated now.

I also took the liberty to add the property actions to Multi URL Picker as welll.

Single Picker:

Multi Picker:

[bjarnef]

chrome_BcOLrC0w8v.mp4

[bjarnef]

@nathanwoulfe I have updated this one as well to target v10/contrib branch.

[nathanwoulfe]

Cheers @bjarnef, looks good to me. 👍