umbraco / Umbraco.Commerce.Issues

18 stars 2 forks source link

Support SVG icons in extention parts of UI #311

Open bjarnef opened 3 years ago

bjarnef commented 3 years ago

Is your feature request related to a problem? Please describe. Since Umbraco v8+ it has been possible to use <umb-icon> which is SVG icons, but with fallback to the older font icons. https://github.com/umbraco/Umbraco-CMS/pull/9063

Describe the solution you'd like It would be great to allow using a custom SVG icon in e.g. payment providers: image

or other areas where icons are used.

Vendr v1.8.0+ requires Umbraco 8.10+ https://vendr.net/docs/core/1.8.0/getting-started/

Regarding tree icons this already in supported in latest versions of Umbraco, so it would mainly be an issue in custom views using the older format: <i class="icon icon-something"></i>.

bjarnef commented 4 months ago

@mattbrailsford I had a look it this in Umbraco Commerce 13.1.0 where I think it is still an issue.

I noticed it at shipping providers, where it may be useful to support SVG with the custom icon.

<i class="large icon-truck" ng-class="shippingProviderType.icon" aria-hidden="true"></i>

I think the fix would be simple by replacing the line above with the following:

<umb-icon icon="{{shippingProviderType.icon}}" class="large"></umb-icon>

I would be ideal to specify type="button" on <button> element as well :)

https://github.com/umbraco/Umbraco-CMS/blob/4a977b85a278bbe863b2c7032de2f6722619f69a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html#L13-L16