SvelteKit SVG Plugin

This plugin makes it possible to import SVG files as Svelte components, inline SVG code or urls.

Install

yarn add --dev @poppanator/sveltekit-svg
npm install -D @poppanator/sveltekit-svg

Usage

In your svelte.config.js

import svg from '@poppanator/sveltekit-svg'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  ...,

  kit: {
    ...,
    vite: {
      // Options are optional
      plugins: [svg(options)]
    }
  }
}

export default config

You can also pass multiple svg transformers based on paths if you want to apply different SVGO options for different SVGs

/** @type {import('@sveltejs/kit').Config} */
const config = {
  ...,

  kit: {
    ...,
    vite: {
      plugins: [
        svg({
          includePaths: ["./src/lib/icons/", "./src/assets/icons/"],
          svgoOptions: {
            multipass: true,
            plugins: ["preset-default", { name: "removeAttrs", params: { attrs: "(fill|stroke)" }}],
          },
        }),
        svg({
          includePaths: ["./src/lib/graphics/"],
          svgoOptions: {
            multipass: true,
            plugins: ["preset-default" ],
          },
        }),
      ]
    }
  }
}

Svelte usage

Import as a Svelte component:

<script>
import Logo from "./logo.svg";
</script>

<Logo />

When used as a component you can also pass attributes to the SVG

<Logo width="200" />

Import as file path:

<script>
import logoUrl from "./logo.svg?url";
</script>

<img src={logoUrl} />

Import as code:

<script>
import logo from "./logo.svg?src";
</script>

{@html logo}

Options

interface Options {
  /**
   * Output type
   * @default "component"
   */
  type?: 'src' | 'url' | 'component'
  /**
   * Verbatim [SVGO](https://github.com/svg/svgo) options
   */
  svgoOptions?: svgo.OptimizeOptions
  /**
   * Paths to apply the SVG plugin on. This can be useful if you want to apply
   * different SVGO options/plugins on different SVGs.
   *
   * The paths are path prefixes and should be relative to your
   * `svelte.config.js` file.
   *
   * @example
   * ```
   * {
   *   includePaths: ['src/assets/icons/', 'src/images/icons/']
   * }
   * ```
   */
  includePaths?: string[]
}

Typescript

For Typescript not to complain about file.svg?component et.al, add the following to your application's global.d.ts. (global.d.ts is just an arbitrary file. It can be named whatever and reside wherever as long as your Typescript config recognize it)