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 プラグインがあります。プラグインは 3 つの異なる方法で使用できます。

  1. スリムなコンポーネントとして
  2. URL として (例: img タグで使用)
  3. 生のテキストとして (例: {@html rawText} で使用)

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

于 2021-05-25T09:06:28.617 に答える
0

記事に目を通してみると、必要以上に手の込んだ方法で、存在しない問題を解決しているように見えます。

Svelte.svelteでは、SVG マークアップ (インライン) のみを含むコンポーネントを作成svelte:componentし、他のコンテンツと同じようにタグを使用できます。

親.svelte

<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>

これは、SVG のみを含むコンポーネントを切り替える方法を示すREPLです。

このREPLに示されているような単なるマークアップであるため、SVG コンポーネントに何かを追加して動的にすることもできます。

于 2021-04-30T23:48:48.750 に答える