重复问题

• 我搜索了现有的问题

最新版本

• 我测试了最新版本

当前行为 😯

当我使用 SvgIcon 和 component prop,例如：

<SvgIcon
  component={MySvgIcon}
  titleAccess="My title"
/>

aria-hidden="true" 将被移除，role="img" 将被添加，但没有 <title>My title</tag> 被添加到 svg 中

预期行为 🤔

titleAccess prop 应该在 SVG 元素上添加 <title>my title here</title> 标签。

重现步骤 🕹

步骤：

1. 使用 webpack svgr 插件将自定义 SVG 图标导入为 ReactComponent"

import { ReactComponent as StarIcon } from './star.svg';

2. 在 component prop 中的 SvgIcon 组件中使用导入的 SVG,并使用 titleAccess

<SvgIcon
  component={StarIcon}
  titleAccess="My title"
/>

上下文 🔦

我想使用自定义的 SVG 图标与 Material UI SvgIcon 组件一起使用，并使其完全可访问。

你的环境 🌎

System: OS: macOS 12.4 Binaries: Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node Yarn: 1.22.17 - ~/.nvm/versions/node/v16.14.0/bin/yarn npm: 8.10.0 - ~/work/PWA-Framework/node_modules/.bin/npm Browsers: Chrome: 103.0.5060.114 Edge: Not Found Firefox: 98.0.2 Safari: 15.5 npmPackages: @emotion/styled: 10.3.0 @types/react: 18.0.1 => 18.0.1 react: 18.0.0 => 18.0.0 react-dom: 18.0.0 => 18.0.0 styled-components: 5.3.5 => 5.3.5 typescript: 4.4 => 4.4.4