svg单元模块怎么更换

在SVG（可缩放矢量图形）中，“单元模块”这个说法可能指的是图标、组件、符号或可复用的图形元素，如果你是在使用 SVG 时想“更换”某个模块（比如一个图标、按钮、图形部件）,以下是几种常见场景和解决方案：

---

✅ 1. 如果是 SVG 内部的 <symbol> 或 <defs> 中定义的模块

你可以在 HTML 中引用这些模块，并通过 use 标签替换内容。

<svg>
  <defs>
    <!-- 定义两个图标 -->
    <symbol id="icon-home" viewBox="0 0 24 24">
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
    </symbol>
    <symbol id="icon-user" viewBox="0 0 24 24">
      <circle cx="12" cy="8" r="5"/>
      <path d="M12 14c-2.76 0-5 2.24-5 5h10c0-2.76-2.24-5-5-5z"/>
    </symbol>
  </defs>
  <!-- 使用 icon-home -->
  <use href="#icon-home" width="24" height="24" fill="blue"/>
  <!-- 想换成 icon-user？直接改 href 即可 -->
  <!-- <use href="#icon-user" width="24" height="24" fill="red"/> -->
</svg>

✅ 更换方法：只需把 href="#icon-home" 改成 href="#icon-user" 即可。

---

✅ 2. 如果模块是外部 SVG 文件（如 sprite.svg）

你可以动态加载或替换：

<!-- 原始 -->
<svg><use href="sprite.svg#icon-home"/></svg>
<!-- 替换为另一个图标 -->
<svg><use href="sprite.svg#icon-user"/></svg>

👉 在 JS 中也可以动态切换：

const useElement = document.querySelector('use');
useElement.setAttribute('href', '#icon-user');

---

✅ 3. 如果是 React/Vue 等框架中的 SVG 组件

React 中封装的组件：

// Icon.js
const Icon = ({ type }) => {
  const icons = {
    home: <HomeIcon />,
    user: <UserIcon />
  };
  return icons[type];
};
// 使用
<Icon type="user" />

✅ 更换方式：传入不同的 type 属性即可。

---

✅ 4. 如果是 CSS 控制样式（颜色/大小等）

即使模块不变，也可以通过 CSS 动态修改外观：

.icon {
  fill: currentColor;
  transition: fill 0.3s;
}
.icon:hover {
  fill: red;
}

---

🔍 如何“更换”SVG 单元模块？

场景	方法
内部 symbol	修改 <use href="#xxx"> 的 ID
外部 SVG Sprite	修改 href 指向不同图标
React/Vue 组件	传入不同 prop 控制图标类型
样式控制	用 CSS 替换颜色/大小等