在 React 项目中，有哪些常见方式可以引入并使用 SVG 文件？
考察说明
考查候选人对 React 项目中静态资源（SVG）引入方式及其适用场景的掌握程度。
回答思路
- 【回答框架 1】在 React 项目中引入 SVG 文件主要有三种常见方式。第一种是作为普通静态资源直接引入，通过 import 语句将 SVG 文件导入为一个 URL 字符串，然后将其赋值给 img 元素的 src 属性或用于 CSS 背景图。这种方式简单直接，适合不太需要交互的静态图标。
- 【回答框架 2】第二种是作为组件引入，利用 SVGR 等工具将 SVG 文件转换为 React 组件。在 Create React App 环境中，可以直接通过 import { ReactComponent as Icon } from './icon.svg' 的方式导入，此时 SVG 内容会被编译为 React 组件，可以接受 props，并能直接控制其样式和事件，适用于需要动态交互的场景。
- 【回答框架 3】第三种是直接内联 SVG 代码，即在 JSX 中直接编写 <svg> 标签及其内部元素。这种方式无需额外打包处理，且可以完全控制 SVG 的每一个属性，但不利于代码复用和可维护性，通常适用于一次性或非常定制的图标。
- 【回答框架 4】选择哪种方式取决于具体需求：若仅需展示静态图标，使用 img 标签或背景图即可；若需要响应事件或动态修改样式，推荐使用组件方式；若图标与业务深度耦合且不使用过多，内联也是可行方案。
- 【关键点 1】作为静态资源导入时，import 返回的是 URL 字符串，可直接用于 img 的 src 属性。
- 【关键点 2】通过 SVGR（CRA 内置）导入的 SVG 会成为 React 组件，支持 props 与事件绑定。
- 【关键点 3】内联 SVG 代码在 JSX 中直接书写，可完全控制但复用性差。