README

🖼️ Svelte Inline SVG

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

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'

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

Usage no npm install needed!