在 Astro 中导入 SVG 文件并在没有 <img /> 标签的情况下使用它

Question

有没有办法直接在 Astro 文件中使用 SVG 文件而不使用标签<img />。我想要这样的东西：

import Logo from "./logo.svg"

然后像这样使用它：

<Logo />

我尝试这样做，但没有成功。

Answer 1

您可以将导入更改为?raw在文件扩展名后添加。然后，使用<Fragment set:html={Logo} />内联CSS。请参阅：这篇文章和Astro 文档

Answer 2

您可以使用这样的代码，无需任何插件。

---
import loaderEyes from "svgs/loader-eyes.svg?raw"; 
---
<div class="loader__eyes-container">
  <Fragment set:html={loaderEyes} />
</div>