如何配置在 sveltekit 中使用 svg 文件？答案

【问题标题】：How to config for using svg file in sveltekit?如何配置在 sveltekit 中使用 svg 文件？
【发布时间】：2021-07-24 00:08:46
【问题描述】：

要在 sveltekit 中导入和使用 svg 文件，我参考了这篇文章 https://riez.medium.com/svelte-kit-importing-svg-as-svelte-component-781903fef4ae 顺便说一句，当我终于输入代码时

<svelte:component this={Logo} />

我收到如下错误

<svelte:component this={...}> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

我希望有人能帮我解决这个问题。

【问题讨论】：

我使用img标签暂时解决了这个问题。比如<img src={Logo} /> 但是我还是想解决这个组件问题，因为它在数组渲染等方面很有用。

标签： svg server-side-rendering svelte-component vite sveltekit

【解决方案1】：

在 svelte-kit 中你可以尝试修复它

<img src={YourSVGComponent} />

它对我有用。

【讨论】：

【解决方案2】：

有一个用于内联 SVG:s 的 SvelteKit 插件。您可以通过三种不同的方式使用该插件：

作为 Svelte 组件
作为 URL（例如用于 img 标签）
作为原始文本（例如用于 {@html rawText}）

https://www.npmjs.com/package/@poppanator/sveltekit-svg

【讨论】：

【解决方案3】：

纵观这篇文章，它似乎正在以一种比需要的更复杂的方式解决一个不存在的问题。

在 Svelte 中，您可以创建一个仅包含 SVG 标记（内联）的 .svelte 组件，然后像处理任何其他内容一样使用 svelte:component 标记。

Parent.svelte

<script>
  import Circle from './Circle.svelte'
</script>

<svelte:component this={Circle} />

圆.svelte

<svg viewbox="0 0 200 200">
  <circle cx="100" cy="100" r="20"/>
</svg>

这里有一个REPL，展示了如何在仅包含 SVG 的组件之间切换。

您甚至可以向 SVG 组件添加内容以使它们动态化，因为它只是 REPL 中所示的标记。

【讨论】：

我认为它只适用于苗条。但是我使用了sveltekit，我认为这是配置的问题。你的回答不能解决问题。因为这是我之前使用的方法。而且它没有起作用，我想知道如何解决它。
我在 Svelte Kit 中使用过它，它仍然有效。
这里是一个你可以克隆并运行的 repo 显示这个方法 100% 确实适用于 Svelte-kit github.com/JHethDev/svg-ssvelte-kit SVG 只是标记，我无法想象你的 Svelte-kit 配置会如何阻止你在 Svelte 文件中使用标记。