我注意到许多网站，如Instagram和Medium使用SVG作为图标的组件，我还注意到一些网站通过将它们放在图像标签中使用SVG。我不确定哪一个是好的实践，以及使用它作为组件的优势是什么。
一般来说，我更喜欢使用它们作为一个组件，但我正在工作的另一个家伙使用它在图像标签
使用svg标记的好处是可以用CSS样式化图标。例如，如果您的站点上有多个图标，并决定更改它们的颜色，那么如果将它们放在svg标记中，就很容易做到这一点。如果您将它们作为img标签的src加载，则不会出现这种情况。
(编辑:棘手的事情是，你必须改变路径的填充，为了改变SVG的颜色，下面给出了一个例子)
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
svg {
width: 5rem;
}
svg path {
fill: green;
}<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path
d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"
/>
</svg>
</body>当你说'使用作为组件'，我想你的意思是有一个单独的组件，其中包含一个svg标签，传递属性作为道具给它?我想说的是，如果你必须定期为它分配自定义属性/道具，那么组件是有用的。没有对与错，只要对你最合适就行。