SVG注入

SVGInject 一个基于开源库 svg-injector 封装的 Vue 组件。它允许您通过 <img> 标签引入 SVG 文件，并在加载完成后自动将其替换为内联的 <svg> 代码。

这种做法的核心优势在于：使外部引入的 SVG 能够响应 CSS 的 fill, stroke 等样式控制，就像它们是直接写在 HTML 中一样。

基础用法

基础注入

只需传入 src 属性指定 SVG 文件的路径。组件会自动加载并将其注入到页面中。

<template>
  <div class="icon-box">
    <TuiSvgInjector src="/assets/icons/rocket.svg" />
  </div>
</template>

样式控制 (CSS Styling)

通过 naming 属性可以为最终生成的 <svg> 标签添加类名。这使得我们可以轻松地通过 CSS 改变图标颜色。

<template>
  <div class="demo-box">
    <TuiSvgInjector 
      src="/assets/icons/heart.svg" 
      naming="my-active-icon" 
    />
  </div>
</template>

<style>
/* 直接通过 CSS 控制 SVG 内部颜色 */
.my-active-icon path {
  fill: #ff4d4f; /* 红色填充 */
  transition: fill 0.3s;
}

.my-active-icon:hover path {
  fill: #cf1322; /* 悬停变深 */
}
</style>

技术说明与限制

⚠️ DOM 替换机制与 Ref 限制

本组件的工作原理是：初始化时渲染一个 <img> 标签，待 SVG 内容加载完毕后，底层库会将该 <img> 标签完全替换为内联的 <svg> 代码。

因此，您无法通过 Vue 的 ref 属性获取到持久的 DOM 引用。初始的 ref 指向的 img 元素在注入完成后会从 DOM 树中移除，新的 svg 元素并不受 Vue 的模板 ref 自动管控。如果需要操作注入后的 SVG DOM，建议使用原生 DOM 查询或在 @load 回调中进行处理。

加载回调

由于 SVG 注入是一个异步过程（需要网络请求 SVG 文件），组件提供了 load 事件，在注入完成且 DOM 替换结束后触发。

<script setup>
const handleSvgLoaded = () => {
  console.log('SVG 已成功注入到页面，现在可以进行 DOM 操作了');
}
</script>

<template>
  <TuiSvgInjector 
    src="/assets/icons/chart.svg" 
    @load="handleSvgLoaded" 
  />
</template>

API 参考

Props

属性名	说明	类型	默认值
src	SVG 文件的路径地址	String	''
naming	为注入后的 <svg> 标签添加的 CSS 类名	String	''
alt	图片的替代文本 (在注入前显示在 img 标签上)	String	''
options	传递给 svg-injector 库的高级配置对象	Object	undefined

Events

事件名	说明	回调参数
load	SVG 注入完成并替换 DOM 后触发	—