blazor-client-side - Icomoon，开放式标志性 SVG 图标未显示在 blazor 页面中

Question

我正在尝试在我的 blazor 项目中使用 Icomoon。我已经下载了图标。

HTML

<button class="search__button">               
    <svg class="search__button__icon">
         <use xlink:href="img/icons/symbol-defs.svg#magnifying-glass.svg"></use>
    </svg>
</button>

CSS

.search__button {
   &__icon {
    color: #444444;
    width: 1.75rem;
    height: 1.75rem;
  }
}

SVG 文件的位置

我得到的结果

我错过了什么吗？我认为已遵循文档中的说明。

感谢您的帮助

编辑

在本文档中，svg 图标可以用作这样的图像:

<img class="nav__level-item__icon" src="img/icons/svg/home.svg" alt="home">

这样使用时，它就会显示。

&__icon {
    width: 1.75rem;
    height: 1.75rem;
    fill: #fff; //and/or color: #fff
}

将它用作图像的唯一问题是我无法设置它的样式。所以，到最后，我还是被困住了。

编辑2

我尝试实现此 blog post 中的建议。图标正在显示，但我仍然无法设置它们的样式。

Answer 1

根据 Microsoft SVG 的使用仍然有限，在 this Microsoft document它指出

If you place an <svg> tag directly into a component file (.razor), basic image 
rendering is supported but many advanced scenarios aren't yet supported. For 
example, <use> tags aren't currently respected

如果您为 xlink:href 属性使用 string 变量，图标将在预渲染后渲染，但一旦 Blazor 库加载到客户端，但看起来有一个解决方法。

您可以返回一个 MarkupString，而不是将 svg 和 use 标记放入 .razor 文件中，例如

<i class="icon">
    @IconMarkupString
</i>

@code {
    [Parameter]
    public string IconSprite { get; set; }

    private MarkupString IconMarkupString
    {
        get => new MarkupString($"<svg class='icon-sprite'><use xlink:href='{IconSprite}'/></svg>");
    }
}

然后像这样使用

<SVGIcon IconSprite="img/icons/symbol-defs.svg#magnifying-glass" />

我注意到的一件事是，为了让样式在 SVG 元素本身上工作，我必须向 SVG 标记添加一个单独的类，否则即使在使用::deep。