Css 显示SVG图标的角度可重用组件的宽度/高度未在任何位置设置&；位于图标正下方，内部为stackblitz

所以我只使用一次应用组件中加载的全局图标定义，然后用这个可重用的图标在整个应用程序中指向它

在大多数情况下，它工作得很好，但出于某种原因，我注意到SVG的位置在图标组件的边界之外，相反，它显示为SVG底部的一些空div，屏幕截图：

这是相关图标组件代码：

<svg
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    [style.width]="width ? width : size"
    [style.height]="height ? height : size"
    [style.margin]="margin ? margin : '0'"
    [style.padding]="padding ? padding : '0'"
>
    <use [style.fill]="color ? color : 'white'" [attr.xlink:href]="absUrl + '#' + name"></use>
</svg>

我已尝试使用将线条高度和图标高度设置为0！根本不起作用/影响任何东西的重要信息

但是，如果我将整个icon div设置为hidden，SVG也不会显示

---

不知道还有什么可以尝试的，谢谢

Svg是一个内联元素。内联元素留下空白。如果在svg元素或图标组件上设置display:block，它将被修复

试试这个：

icon.component.scss

:host{
  display: block;
}

---

嗯，有什么特别的理由要用block吗？flex似乎达到了一些相同的结果——无论如何，谢谢，这解决了它！不客气！！！。显示：如果图标组件中只有一个svg，则块不会产生任何影响。

:host{
  display: block;
}