寻求基于CSS类切换样式的SVG图标集最优实现方案

针对你需要构建可通过CSS类切换样式的按钮SVG图标集需求，以下是几种经过验证的实用方案，能解决你之前遇到的问题：

方案1：CSS自定义属性（变量）+ 内联SVG精灵 #

这是当前最灵活的方案，既保留SVG精灵的缓存优势，又解决Shadow DOM样式穿透问题。

• 步骤1：定义内联SVG精灵，给图标路径绑定可继承的CSS变量

<svg style="display: none;">
  <symbol id="icon-hamburger" viewBox="0 0 24 24">
    <path fill="var(--icon-fill, #000)" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
  </symbol>
  <symbol id="icon-close" viewBox="0 0 24 24">
    <path fill="var(--icon-fill, #000)" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
  </symbol>
</svg>

• 步骤2：在按钮中引用图标，通过类切换显示状态

<button class="icon-btn">
  <svg class="icon">
    <use href="#icon-hamburger" class="icon__default"></use>
    <use href="#icon-close" class="icon__active"></use>
  </svg>
</button>

• 步骤3：编写CSS控制切换逻辑和样式

.icon-btn {
  --icon-fill-default: #333;
  --icon-fill-active: #ff4444;
  background: transparent;
  border: none;
  cursor: pointer;
}

.icon__active {
  display: none;
}

/* 切换图标显示 */
.icon-btn.is-open .icon__default {
  display: none;
}
.icon-btn.is-open .icon__active {
  display: inline;
}

/* 切换颜色样式 */
.icon-btn:not(.is-open) {
  --icon-fill: var(--icon-fill-default);
}
.icon-btn.is-open {
  --icon-fill: var(--icon-fill-active);
}

优势：

• 保留SVG精灵的缓存特性，代码量可控
• CSS变量可穿透<use>的Shadow DOM限制（变量通过继承生效）
• 支持多路径、不同样式的图标切换，灵活度拉满

方案2：父元素类直接控制<use>显示与样式 #

如果需求较简单，可直接通过父元素的类选择器控制图标的显示状态和样式，无需额外变量：

<button class="menu-btn">
  <svg class="menu-icon" viewBox="0 0 24 24">
    <use href="#icon-hamburger" class="menu-icon__open"></use>
    <use href="#icon-close" class="menu-icon__close"></use>
  </svg>
</button>

.menu-icon__close {
  display: none;
}

/* 切换图标显示 */
.menu-btn.open .menu-icon__open {
  display: none;
}
.menu-btn.open .menu-icon__close {
  display: inline;
}

/* 控制图标颜色 */
.menu-btn .menu-icon use {
  fill: #333;
}
.menu-btn.open .menu-icon use {
  fill: #ff4444;
}

优势：

• 代码极简，上手快
• 无需额外理解CSS变量，适合简单切换场景

方案3：SVG内联<style>结合:root类切换 #

如果需要给图标内的不同路径设置差异化样式，可在SVG精灵内部定义基于:root类的样式，通过外部父容器的类触发变化：

<svg style="display: none;">
  <style>
    :root.menu-open #icon-hamburger path {
      display: none;
    }
    :root.menu-open #icon-close path {
      display: inline;
    }
    #icon-hamburger path:nth-child(1) {
      fill: #333;
    }
    #icon-hamburger path:nth-child(2) {
      fill: #666;
    }
    #icon-close path {
      fill: #ff4444;
    }
  </style>
  <symbol id="icon-hamburger" viewBox="0 0 24 24">
    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
  </symbol>
  <symbol id="icon-close" viewBox="0 0 24 24">
    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
  </symbol>
</svg>

使用时给父容器添加类：

<div class="menu-open">
  <button>
    <svg>
      <use href="#icon-hamburger"></use>
      <use href="#icon-close"></use>
    </svg>
  </button>
</div>

优势：

• 支持在SVG内部定义复杂的路径样式规则
• 通过外部类触发内部样式变化，逻辑清晰

总结：CSS自定义属性+内联SVG精灵是最通用的最优解，能完美解决你之前遇到的所有问题，同时兼顾灵活性和性能。

内容的提问来源于stack exchange，提问作者Linus Caldwell