@svelte-put/preprocess-inline-svg

Svelte preprocessor for inlining static svg at build time

svelte-put

This package is part of the @svelte-put family. For contributing guideline and more, refer to its readme.

Usage & Documentation

See the dedicated documentation page here.

Quick Start

Given this svelte.config.js

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: [
		inlineSvg([
			{
				directories: 'src/assets/icons',
				attributes: {
					class: 'icon',
					width: '20',
					height: '20',
				},
			},
			{
				directories: 'src/assets/pictograms',
			},
		]),
		// other preprocessors
	],
};
export default config;

and the asset files as follow

src/assets
    |
    |-- icons
         |-- svelte.svg
         |
         |-- google
               |-- arrow-right.svg
         |-- simpleicons
               |-- github.svg
    |
    |-- pictograms
         |-- diagram.svg

We can now do

<!-- this will have width="20" height="20" as specified in the config -->
<svg data-inline-src="svelte"></svg>

<!-- nested -->
<svg data-inline-src="google/arrow-right.svg"></svg>
<!-- .svg can be omitted -->
<svg data-inline-src="simpleicons/github"></svg>

<!-- with custom attributes -->
<svg data-inline-src="diagram" width="100" height="100"></svg>

<!-- alternatively, you can provide a per-case path that is relative to the current source file -->
<svg data-inline-src="./local-icon.svg"></svg>

<!-- if the source svg is not found for any of the above, an error will be thrown -->

Changelog