英文:
Should we use SVG as React Component or use it with the image tag
问题
我注意到许多网站，如Instagram和Medium，将SVG用作图标的组件，我也注意到一些网站将SVG放在图像标签中使用。我不确定哪种方法是一个好的实践，以及将其用作组件的优势是什么。
通常我更喜欢将它们用作组件，但我与另一个人合作，他将其放在图像标签中使用。
英文:
I noticed many websites like Instagram and Medium use SVG as a component for icons, and I also noticed some use SVG by putting them in image tag. I not sure which one is a good practice, and what's the advantage of using it as a component.
Generally I prefer to use them as a component but the other guy I am working with uses it in image tag.
答案1
得分: 1
使用svg标签的好处是您可以使用CSS样式图标。例如，如果您的网站上有多个图标并决定更改它们的颜色，只需将它们放置在svg标签内，您就可以轻松实现这一目标。如果您将它们加载为img标签的src，情况就不同了。
（编辑：棘手的问题在于您必须更改路径的填充以更改SVG的颜色，下面提供了一个示例）。
<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-css -->
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
svg {
width: 5rem;
}
svg path {
fill: green;
}
<!-- 语言：lang-html -->
<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的颜色，如上所示。
英文:
The benefit of using a svg tag is that you can style the icon with CSS. If, for example, you have multiple icons on your site and decide to change their color you could easily do this if you placed them inside svg tags. This isn't the case if you load them as the src of an img tag.
(EDIT: the tricky thing is that you have to change the fill of the path, in order to change the color of the SVG, an example is given below).
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
svg {
width: 5rem;
}
svg path {
fill: green;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: 0
当你说'用作组件'时，我理解你的意思是创建一个单独的组件，其中包含一个svg标签，并将属性作为props传递给它？
我会说，如果你经常需要为其分配自定义属性/props，那么使用一个组件是有用的。没有对错之分，只要对你最有效就可以。
英文:
When you say 'use as component', I assume you mean having a separate component which contains an svg tag, passing attributes as props to it?
I'd say that if you regularly have to assign custom attributes/props to it, a component is useful. There's no right or wrong, just whatever works best for you.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论