A Svelte plugin to inline SVG sources. Ported from Vue Inline SVG.
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.
npm install svelte-inline-svgyarn add svelte-inline-svgWARNING: For SSR, please install the package as a dev dependency. More info here.
<script>
import InlineSVG from 'svelte-inline-svg'
</script>
<InlineSVG src={src} />| Prop | Required | Type |
|---|---|---|
| src | true |
String |
| transformSrc | false |
Function |
| {...attributes} | false |
Object |
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...'
<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 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} />A list of supported native events can be found here.
<script>
function handleEvent(event) {
alert(event;
}
</script>
<InlineSVG src={src} on:click={handleEvent()} />Most of the source code is ported from Vue Inline SVG. The native event handling is based on this implementation from Hunter Perrin.
MIT