Open uniquelau opened 3 years ago
looks related to this.
PlatformNotSupportedException on Blazor Client Side
I will take a look to see if I can work around WASM's limitations.
Any updates on this?
This seems to be related to a thread blocking call in TailBlazorHeroIcon.razor.cs which is definitely not supported in Blazor.
var document = await Task.Run(() => {
return XDocument.Load($"{baseUri}_content/TailBlazor.HeroIcons/icons/{EnumExtension.GetEnumDescription(IconStyle)}/{EnumExtension.GetEnumDescription(Icon)}.svg");
});
One workaround that I have found is to override this class and load the SVG through an HTTP request and use async method to load it instead:
//.....
// Use non blocking HTTP request to stream the SVG
var client = new HttpClient();
var icon = (await client.GetAsync(NavigationManager.BaseUri + "_content/TailBlazor.HeroIcons/icons/" +
IconStyle.GetEnumDescription() + "/" + Icon.GetEnumDescription() + ".svg"))
.Content;
await using var stream = await icon.ReadAsStreamAsync();
// load asynchronously
var root = (await XDocument.LoadAsync(stream, LoadOptions.PreserveWhitespace, CancellationToken.None)).Root;
root?.SetAttributeValue("width", Width);
root?.SetAttributeValue("height", Height);
root?.SetAttributeValue("stroke", "");
root?.SetAttributeValue("class", _classStroke);
foreach (var xelement in root?.Descendants().Select((Func<XElement, XElement>)(path => path)) ??
new List<XElement>())
{
if (xelement.Attribute("stroke-width") != null)
xelement.SetAttributeValue("stroke-width", StrokeWidth);
if (xelement.Attribute("fill") != null)
xelement.SetAttributeValue("fill", StrokeWidth);
}
_svgIcon = root?.ToString();
//...
Then I created a CustomHeroIcons.cs
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;
namespace Custom.Components.HeroIcons
{
public class CustomHeroIcon : CustomHeroIconBase
{
protected override void BuildRenderTree(RenderTreeBuilder __builder)
{
if (this.EnableComments)
__builder.AddContent(0, this._svgIconComment);
__builder.AddContent(1, (MarkupString)this._svgIcon);
}
}
}
Finally, I just use this in my code:
<button @onclick="NavigateToHome">
Home
<CustomHeroIcon Class="tw-h-6 tw-w-6"
Icon="HeroIcon.Home"></CustomHeroIcon>
</button>
Thanks, if you want submit a PR or I'll update using this method instead
Running .NET 5.0, Blazor PWA Installed in client project and updated _Import. Referencing the component directly SVG is requested by browser. However, exception is thrown.
Throw Exception at TailBlazor.HeroIcons.TailBlazorHeroIconBase.OnInitialized()
SVG requested 3 times (as expected)