svelte-preprocess-import-assets

Import assets directly in the markup. Supports Svelte 3, 4, and 5.

NOTE: Svelte 5 support is experimental and may break between versions.

Convert this:

<h1>Look at this image</h1>
<img src="./assets/cool-image.png" alt="cool image" />

Into this:

<script>
  import ___ASSET___0 from './assets/cool-image.png'
</script>

<h1>Look at this image</h1>
<img src={___ASSET___0} alt="cool image" />

Usage

Install with your package manager:

npm install --save-dev svelte-preprocess-import-assets

Include the preprocessor in your bundler's Svelte plugin preprocess option:

import { importAssets } from 'svelte-preprocess-import-assets'

svelte({ preprocess: [importAssets()] })

// or in svelte.config.js
export default {
  preprocess: [importAssets()],
  // ... other svelte options
}

API

The importAssets() function receives an optional options object for its first parameter. The object may contain these properties:

sources

Type: AssetSource[] | ((defaultSources: AssetSource[]) => AssetSource[])

interface AssetSource {
  tag: string
  srcAttributes?: string[]
  srcsetAttributes?: string[]
  filter?: (metadata: FilterMetadata) => boolean
}

interface FilterMetadata {
  tag: string
  attribute: string
  value: string
  attributes: Record<string, string>
}

Default: See DEFAULT_SOURCES in src/constants.js

These are the sources to look for when scanning for imports. You can provide an entirely different list of sources, or declare a function to access the default sources and augment it. The supported tags and attributes are based on html-loader (except icon-uri). Component name as tag is also supported.

{
  sources: (defaultSources) => {
    return [
      ...defaultSources,
      // Also scan `data-src` and `data-srcset` of an img tag
      {
        tag: 'img',
        srcAttributes: ['data-src'],
        srcsetAttributes: ['data-srcset'],
      },
    ]
  },
}

importPrefix

Type: string
Default: ___ASSET___

The string to be prefixed for asset import names, e.g. ___ASSET___0 and ___ASSET___1.

http

Type: boolean
Default: false

Whether a URL with http/https protocol should be converted to an import.

urlFilter

Type: (url: string) => boolean

Whether a URL should be converted into an import.

{
  // Include URLs with specific extensions only
  urlFilter: (url) => /\.(png|jpg|gif|webp)$/.test(url),
}

Recipes

Ignore an element

<!-- svelte-preprocess-import-assets-ignore -->
<img src="./assets/cool-image.png" alt="cool image" />

Attributions

svelte-assets-preprocessor: Initial motivation to reduce dependencies.

License

MIT

bluwy / svelte-preprocess-import-assets