2

在 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

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

4

3 回答 3

1

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

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

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

于 2021-05-25T09:06:28.617 回答
1

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

<img src={YourSVGComponent} />

它对我有用。

于 2021-05-02T06:12:46.287 回答
0

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

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

父母苗条

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

<svelte:component this={Circle} />

Circle.svelte

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

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

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

于 2021-04-30T23:48:48.750 回答