@svelte-put/inline-svg

#Introduction

Existing solutions for inlining SVGs in svelte land often rely on component, which proves painful when it comes to styling and event handling. This package attempts to achieve a minimal usage api using svelte action .

#Build Time Solution

For an alternative solution to statically inline SVG at build time, use @svelte-put/preprocess-inline-svg .

import { inlineSvg } from '@svelte-put/preprocess-inline-svg/vite';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [inlineSvg(), sveltekit()],
});

<svg inline-src="google/info"></svg>

See more examples & documentation at @svelte-put/preprocess-inline-svg .

#Installation

npm install --save-dev @svelte-put/inline-svg

#Quick Start

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

  export let src = 'https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg';
</script>

<!-- add attributes and styling as with any other HTML element -->
<svg use:inlineSvg={src} width="100" class="svelte" />

<style>
  svg.svelte {
    filter: drop-shadow(0 0 0.5rem theme('colors.svelte'));
  }
</style>

#Attributes & Inner HTML

Attributes provided to the source svg element will be kept after build and override existed ones in the inlined SVG.

<svg use:inlineSvg={'...'} width="100" height="100" class="c-icon"></svg>

InnerHTML of the source svg element will be replaced with the that from the inlined SVG.

<svg use:inlineSvg={'...'}>anything in here will be replaced</svg>

If you have a use case where it is useful to append/prepend the innerHTML of inlined SVGs rather than replace it, please raise an issue over at github . For now, let's keep things simple.

#Customization

Note that inlineSvg should only be used on svg elements!

inlineSvg can take its parameter as either a string or a config object with the following options