2

我正在尝试在我的 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

我试图实现这篇博文中的建议。图标正在显示，我仍然无法设置它们的样式。

4

1 回答 1

2

根据 Microsoft SVG 的使用仍然有限，在此 Microsoft 文档中指出

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

如果string为属性使用变量，xlink:href则图标将在预渲染后渲染，但在客户端中加载 Blazor 库后会立即消失，但看起来有一种解决方法。

您可以返回一个 MarkupString 而不是将svganduse标记放在文件中，例如.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.

于 2021-02-18T07:30:51.430 回答