A Svelte plugin to inline SVG sources. Ported from Vue Inline SVG.
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 path or a base64-encoded string.
const src = '/path/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} />Most of the source code is ported from Vue Inline SVG.
MIT