Feather Icons在Blazor WASM共享组件中无法显示的解决问询

问题根源 #

Feather Icons依赖feather.replace()脚本初始化页面上的图标元素，这个脚本默认在index.html加载时执行。但Blazor组件（如MainLayout.razor）是页面加载完成后动态渲染的，这些晚于页面初始化生成的图标元素没被脚本处理，所以无法显示。

可行解决方案 #

方案1：组件内手动触发初始化 #

在MainLayout.razor中利用Blazor的生命周期方法，在组件渲染完成后调用Feather的初始化方法：

@inject IJSRuntime JSRuntime

@* 你的布局内容，包含图标代码 <i data-feather="grid"></i> *@

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("feather.replace");
        }
    }
}

此方法会在组件首次渲染完成后，重新初始化页面上所有Feather图标，包括组件内的元素。

方案2：全局监听Blazor渲染事件 #

如果多个组件都用到Feather图标，可在wwwroot/index.html中添加全局监听，自动处理所有动态渲染的图标：

<script src="feather-icons/dist/feather.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        feather.replace();
        // 监听Blazor组件渲染完成事件，自动初始化新生成的图标
        window.addEventListener('blazor.webassembly.rendercompleted', () => {
            feather.replace();
        });
    });
</script>

这样不管哪个Blazor组件动态渲染了图标，都会被自动初始化，无需在每个组件中单独处理。

方案3：使用Blazor封装组件（推荐） #

直接使用社区封装的Blazor版Feather Icons组件，完全贴合Blazor开发模式，无需手动处理JS交互：

@* 先安装对应的NuGet包，比如Blazor.FeatherIcons *@
<FeatherIcon Icon="Grid" />

组件内部会自动处理图标的渲染逻辑，避免JS交互带来的问题。

内容的提问来源于stack exchange，提问作者Abdulsalam Elsharif