嘿，这个问题我刚好处理过好几次！你完全可以实现SVG图标和导航栏文字同步变色的效果，核心是让SVG的颜色能像文字一样被CSS控制——不一定非要把它“转成文字”，不过确实有两种可行的思路，我给你详细拆解：

方案一：将SVG转为自定义字体图标（真正的“文字式”控制） #

如果确实想把SVG变成和文字完全一样的可控制元素，可以把它做成自定义字体图标，这样就能用color属性直接控制颜色，和导航栏文字的逻辑完全同步：

• 第一步：准备你的SVG图标，确保它是单色（你的白色图标刚好符合），并且路径是完整闭合的，没有多余的分组或复杂样式。
• 第二步：用本地的SVG转字体工具（比如一些离线桌面应用），把SVG上传后生成标准的字体文件（通常包含.woff2、.ttf等格式）。工具会给你一个字符映射表，对应每个图标对应的特殊字符。
• 第三步：在项目的CSS里引入自定义字体：

@font-face {
  font-family: 'MyNavIcons';
  src: url('fonts/my-nav-icons.woff2') format('woff2'),
       url('fonts/my-nav-icons.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

• 第四步：创建一个图标类，把字体和默认样式绑定：

.nav-icon {
  font-family: 'MyNavIcons';
  font-size: 20px; /* 匹配导航栏文字大小 */
  color: white; /* 默认白色 */
}

• 第五步：在HTML里像用文字一样调用图标，比如：

<span class="nav-icon"></span>

这里的特殊字符是工具生成的对应你图标的编码，照着映射表用就行。之后只要给导航栏滚动时的颜色变化逻辑加上这个.nav-icon类，它就会和文字一起从白变黑了。

方案二：用内联SVG + currentColor（首选！更简单高效） #

其实不用转字体，直接用内联SVG就能实现同样的效果，而且步骤更少：

• 第一步：把SVG的代码直接嵌入到HTML里，不要用<img>标签引用（img标签引用的SVG没法用CSS改颜色）。比如：

<svg class="nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <!-- 这里放你的SVG path代码 -->
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
</svg>

关键是给SVG加上fill="currentColor"——这个属性会让SVG的填充色自动继承父元素的文字颜色！

• 第二步：复用你模板里的滚动变色逻辑。你的模板应该是通过滚动时给导航栏加一个类（比如.scrolled）来改变文字颜色的，对应的CSS大概是这样：

.navbar {
  color: white; /* 初始白色 */
}
.navbar.scrolled {
  color: black; /* 滚动后黑色 */
}

• 搞定！现在你的内联SVG会自动跟着导航栏的文字颜色变化，完全不用额外写JS或CSS，零成本同步效果。

小提示 #

优先试试方案二，因为它不需要额外生成字体文件，修改起来更灵活，而且兼容性也很好。如果你的SVG是多色的，那方案一可能更合适，但你的图标是单色的，方案二绝对是最优解。

内容的提问来源于stack exchange，提问作者Maddie Graham