React项目中SVG鼠标悬停时动态覆盖原有fill属性的方法

问题根源：用<img>标签引入SVG时，SVG是作为独立外部资源存在的，外部CSS无法穿透修改其内部<path>的样式；再加上<path>本身有内联的fill="#f5f5f5"，优先级比外部CSS更高，所以hover时的fill设置不生效。

下面是几种可行的解决方案：

方法1：将SVG作为React组件导入（推荐） #

React支持直接把SVG转换成组件使用，这样SVG会变成内联元素，外部CSS可以直接控制其样式。

1. 先修改SVG文件，去掉<path>标签里的内联fill属性（保留也可以用CSS覆盖，但去掉更简洁）。
2. 在React组件中导入SVG为组件：

import { ReactComponent as UserIcon } from './user-icon.svg';

3. 在JSX中使用该组件并添加类名：

<UserIcon className="userIcon" />

4. 编写CSS样式：

.userIcon {
  fill: #f5f5f5; /* 默认颜色 */
}
.userIcon:hover {
  fill: #ff4444; /* 悬停时的颜色 */
}

方法2：使用内联SVG直接写入JSX #

如果不想单独维护SVG文件，可以直接把SVG代码复制到React组件中：

<svg className="userIcon" 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" />
</svg>

然后同样用CSS控制hover样式：

.userIcon {
  fill: #f5f5f5;
}
.userIcon:hover {
  fill: #ff4444;
}

方法3：用CSS filter实现（适合单色图标） #

如果必须用<img>标签，可以通过CSS filter来改变图标颜色，不过只适用于单色SVG：

.userIcon {
  filter: brightness(0) saturate(100%) invert(98%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(102%) contrast(96%); /* 对应#f5f5f5的filter值 */
}
.userIcon:hover {
  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%); /* 对应红色的filter值 */
}

你可以用在线工具把目标颜色转换成对应的filter参数，不过这种方法灵活性较差，不推荐用于需要精确颜色的场景。

内容的提问来源于stack exchange，提问作者Noam TheLoreFnatic Hadad