复刻Bootstrap主题切换器时，如何让SVG图标适配导航栏高度？

下面是几个快速让SVG图标适配Bootstrap导航栏高度的方案，按需选择：

1. 直接修改SVG的原生属性 #

这是最直接的方式，给SVG标签添加width和height属性，同时保留viewBox保证图标比例不变，建议设置为24px左右（适配Bootstrap默认导航栏56px的高度，居中后视觉协调）：

<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
  <!-- 你的SVG路径代码 -->
</svg>

• preserveAspectRatio="xMidYMid meet"确保图标缩放时保持比例，不会拉伸变形
• fill="currentColor"可以让图标继承父元素的文字颜色，适配主题切换

2. 用CSS类统一控制尺寸 #

给自定义SVG添加专属类，通过CSS设置固定或响应式尺寸，推荐使用rem单位适配Bootstrap的字体系统：

.theme-switch-icon {
  width: 1.5rem; /* 对应24px，Bootstrap默认font-size为16px */
  height: 1.5rem;
  vertical-align: middle; /* 与导航栏文字垂直对齐 */
}

HTML中应用类：

<svg class="theme-switch-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <!-- 你的SVG路径代码 -->
</svg>

3. 利用Bootstrap内置工具类快速实现 #

Bootstrap 5+提供了现成的尺寸工具类，无需自定义CSS，直接给SVG添加对应类即可：

<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <!-- 你的SVG路径代码 -->
</svg>

• w-6和h-6对应1.5rem（24px），是Bootstrap图标组件的默认尺寸
• align-middle确保图标与导航栏内的文字、按钮等元素垂直居中对齐

4. 若SVG作为背景图使用的调整方案 #

如果你的主题切换器是用按钮+背景图实现的，需要调整background-size属性：

.theme-switch-btn {
  padding: 0.5rem;
  background-image: url('path/to/your-icon.svg');
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
}

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