如何在Astro中无需<img />标签直接使用SVG文件？

当然可以实现，你当前的问题是因为Astro默认导入SVG时会返回文件URL，而非可直接调用的组件。以下是两种实用的解决方法：

• 方法一：导入SVG原始代码并直接渲染
  修改导入语句，加上?raw后缀来获取SVG的原始文本内容：

  import LogoSvg from "./logo.svg?raw";
  

  之后在模板中使用set:html指令插入SVG内容：

  <div set:html={LogoSvg}></div>
  

  这样SVG会直接内联渲染，不需要<img>标签。

• 方法二：封装为Astro组件
  把SVG内容单独创建成一个.astro文件，比如Logo.astro，内容就是你的SVG代码：

  <!-- Logo.astro -->
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <!-- 你的SVG路径等内容 -->
  </svg>
  

  然后在需要使用的文件中导入并直接调用组件：

  import Logo from "./Logo.astro";
  
  <Logo />
  

这两种方法都能满足你不用<img>标签直接使用SVG的需求，根据自己的场景选择即可。

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