如何在 html 中引用 SVG 并访问 css 样式

我的项目（Angular 10）中包含许多不同的 SVG。其中一些以不同的大小和填充颜色等多次使用。

我试图找到一种在我的 html 代码中引用它们的方法，并可以通过样式访问：

CSS：

.svg {
  fill: red;
}

参考：

<svg>
   <use></use>
</svg>

<object></object>

<img></img>

<embed></embed>

到目前为止，我还没有找到允许我引用它们但也能够像添加内联时一样访问 SVG 本身的 fill 属性的解决方案。

排队：

<svg>
   <path>
   </path>
</svg>

内联添加它们会很麻烦。

这通常是如何处理的？

感谢您的帮助！