如何在React.js项目中使用SVG格式图片？

1. 作为普通图片引用 #

直接用<img>标签引入，和使用PNG/JPG的逻辑完全一致，适合不需要修改内部样式的场景：

<img src="/path/to/your/icon.svg" alt="图标描述" width="24" height="24">

• 优点：写法简单，浏览器自动处理渲染，支持懒加载
• 注意：无法通过CSS直接修改SVG内部的颜色、路径样式

2. 内联嵌入SVG #

把SVG的完整代码直接写在HTML结构中，适合需要定制样式或添加交互的场景：

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12 6C9.79 6 8 7.79 8 10C8 12.21 9.79 14 12 14C14.21 14 16 12.21 16 10C16 7.79 14.21 6 12 6ZM12 12C10.9 12 10 11.1 10 10C10 8.9 10.9 8 12 8C13.1 8 14 8.9 14 10C14 11.1 13.1 12 12 12Z" fill="#333"/>
</svg>

• 可直接用CSS修改内部元素样式：

svg path {
  fill: #007bff;
  transition: fill 0.3s;
}
svg:hover path {
  fill: #0056b3;
}

3. 作为CSS背景图 #

适合装饰性背景或小图标，通过background-image引入：

.icon {
  width: 24px;
  height: 24px;
  background-image: url('/path/to/your/icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

• 若需修改颜色，可通过filter属性调整（适合简单单色SVG）：

.icon:hover {
  filter: hue-rotate(90deg);
}

4. 使用SVG Sprite（多图标场景） #

把多个SVG图标整合到一个文件中，减少HTTP请求，通过<use>标签引用：

1. 定义Sprite（可放在HTML头部或单独.svg文件）：

<svg style="display: none;">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
  <symbol id="icon-user" viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
  </symbol>
</svg>

2. 在需要的位置引用：

<svg width="24" height="24">
  <use href="#icon-home"/>
</svg>

• 优点：复用性强，减少请求，同样支持CSS修改样式

内容的提问来源于stack exchange，提问作者MOHNISH KUMAR