CSS 中的 currentColor 当前文本颜色

.icon {
  width: 24px;
  height: 24px;
  fill: currentColor; /* 图标填充色自动与文字同步 */
}

现在，无论你将这段 SVG 放在什么颜色的文字旁边，图标都会自动匹配，无需生成多个颜色的图标资源。

常见使用场景与技巧

场景 1：自适应链接下划线

a {
  color: #007bff;
  text-decoration-color: currentColor; /* 下划线与文字同色，且支持 α 通道 */
  text-underline-offset: 2px;
}

a:hover {
  color: #0056b3; /* 下划线自动变深 */
}

场景 2：等分分割线

hr {
  border: none;
  border-top: 1px solid currentColor;
  opacity: 0.3; /* 让分割线半透明，不刺眼 */
}

场景 3：表单聚焦的外发光

input:focus {
  outline: none;
  box-shadow: 0 0 0 3px currentColor; /* 用文字颜色做外发光，统一品牌色 */
}