React项目中如何对SVG组件添加类名样式与无障碍alt文本？

核心原因说明 #

<img>标签加载的SVG属于外部资源，无法通过CSS修改SVG内部的fill、stroke等样式；而通过ReactComponent导入的SVG会被渲染为原生<svg>标签，本身不支持<img>专属的alt属性，因此你之前的两种写法无法同时满足需求。

正确实现方式 #

给渲染为<svg>的组件添加无障碍专属属性替代alt，即可同时保留样式控制能力：

• 用role="img"告知屏幕阅读器当前元素属于图片类型
• 用aria-label="你的描述文本"替代alt属性提供文字说明

修改后的代码如下：

import { ReactComponent as Logo } from "./logo.svg";

const SvgLogo = () => {
  // 渲染结果：<svg class='someClass' role="img" aria-label="logo"/>
  // 支持通过someClass自定义SVG样式，同时符合无障碍规范
  return <Logo className='someClass' role="img" aria-label="logo" />
}

兼容增强（可选） #

如果需要兼容更老旧的屏幕阅读器，可以在SVG内部嵌入<title>标签进一步提升识别率：

import { ReactComponent as Logo } from "./logo.svg";

const SvgLogo = () => {
  return (
    <Logo className='someClass' role="img" aria-label="logo">
      <title>logo</title>
    </Logo>
  )
}

内容的提问来源于stack exchange，提问作者Krzysztof Madejski