@svelte-put/inline-svg

Svelte action use:inlineSvg for inlining dynamic SVGs (fetched from network)

svelte-put

This package is part of the @svelte-put family. For contributing guideline and more, refer to its readme.

Usage & Documentation

See the dedicated documentation page here.

Dynamic SVGs - Svelte Action

<script>
  import { inlineSvg } from '@svelte-put/inline-svg';
</script>

<svg use:inlineSvg={'https://example.com/icon.svg'}></svg>

Static SVGs - Vite Plugin / Svelte Preprocessor

Vite Plugin

To inline static SVGs during build time, use the exported Vite plugin:

// vite.config.js
import path from 'path';
import { inlineSvg } from '@svelte-put/inline-svg/vite';

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [
    inlineSvg(),
    sveltekit(),
  ],
};
export default config;

Bare Preprocessor

The Svelte preprocessor is what is used internally by the aforementioned Vite plugin, which is the recommended. However, if your setup requires using the preprocessor directly, you can do so:

// svelte.config.js
import { inlineSvg } from '@svelte-put/inline-svg/preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [inlineSvg()],
};
export default config;

Changelog