@svelte-put/inline-svg GitHub

solution for inlining SVGs in svelte land

@svelte-put/inline-svg @svelte-put/inline-svg @svelte-put/inline-svg changelog


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 , which is conveniently re-exported from this package as well.

complementary preprocessor: no runtime logics

import inlineSvg from '@svelte-put/inline-svg/preprocess';

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

preprocess: usage example

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

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



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

Quick Start

The Svelte logo SVG on the right is dynamically inlined on load.
Notice in the source code below, only width (or height) is needed; by default inlineSvg will calculate the other dimension to keep the aspect ratio.

Quick Start

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

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

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

  svg.svelte {
    filter: drop-shadow(0 0 0.5rem theme('colors.svelte'));

Attributes & Inner HTML

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

merging attributes

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

merging attributes

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


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




(required) the remote URI to fetch SVG from
type: string


whether to automatically calculate the missing dimension (width / height) to keep the aspect ratio
type: boolean
default: true


a function to transform the fetched SVG string before inlining
type: (svg: string) => string
default: (svg) => svg


cache policy for use in fetch request
type: Request.cache
default: 'no-cache'

API Reference

The best documentation is no documentation!

It is recommended to utilize editor intellisense & explore in-code documentation while using the package (and use typescript if possible 😉) .

See the extracted API Reference on github.

API extraction is powered by @microsoft/api-extractor and @microsoft/api-documenter ).

Edit this page on GitHub