🖼️ Svelte Inline SVG

A Svelte plugin to inline SVG sources. Ported from Vue Inline SVG.

Notice

This package was first created before SvelteKit and the current version of Svelte existed. Sadly, I currently do not have the time nor the personal need to update this package or fix any of its current issues. However, I’d be happy to hand it over to a capable maintainer or merge any pull requests for any existing or new issues.

Installation

NPM

npm install svelte-inline-svg

Yarn

yarn add svelte-inline-svg

WARNING: For SSR, please install the package as a dev dependency. More info here.

Usage

<script>
  import InlineSVG from 'svelte-inline-svg'
</script>

<InlineSVG src={src} />

Props

Prop	Required	Type
src	true	String
transformSrc	false	Function
{...attributes}	false	Object

src

The src can either be a url or a base64-encoded string.

const src = '/url/to/file.svg'

or

const src = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZG...'

transformSrc

<script>
  const transform = (svg) => {
    let point = document.createElementNS("http://www.w3.org/2000/svg", 'circle')
      point.setAttributeNS(null, 'cx', '20')
      point.setAttributeNS(null, 'cy', '20')
      point.setAttributeNS(null, 'r', '10')
      point.setAttributeNS(null, 'fill', 'red')
      svg.appendChild(point)
    return svg
  }
</script>

<InlineSVG src={src} transformSrc={transform} />

attributes

Attributes which are directly set, will overwrite any attributes that may be inlined in the src.

WARNING: Make sure you only set valid attributes

<script>
  $: attributes = {
    width: width,
    height: height,
    // ...
  }
</script
  
<InlineSVG src={src} {...attributes} />

on:event

A list of supported native events can be found here.

<script>
  function handleEvent(event) {
		alert(event;
	}
</script>

<InlineSVG src={src} on:click={handleEvent()} />

Credits

Most of the source code is ported from Vue Inline SVG. The native event handling is based on this implementation from Hunter Perrin.

License

MIT