@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