Repository files navigation

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><imgsrc="./assets/cool-image.png"alt="cool image" />

Into this:

<script>import___ASSET___0from'./assets/cool-image.png'</script><h1>Look at this image</h1><imgsrc={___ASSET___0}alt="cool image" />

Install with your package manager:

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

Include the preprocessor in your bundler's Svelte pluginpreprocess option:

import{importAssets}from'svelte-preprocess-import-assets'svelte({preprocess:[importAssets()]})// or in svelte.config.jsexportdefault{preprocess:[importAssets()],// ... other svelte options}

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

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

  interfaceAssetSource{tag:stringsrcAttributes?:string[]srcsetAttributes?:string[]filter?:(metadata:FilterMetadata)=>boolean}interfaceFilterMetadata{tag:stringattribute:stringvalue:stringattributes:Record<string,string>}

• Default: SeeDEFAULT_SOURCES insrc/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 onhtml-loader (excepticon-uri). Component name astag 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'],},]},}

• Type:string

• Default:___ASSET___

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

• Type:boolean

• Default:false

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

• Type:(url: string) => boolean

  Whether a URL should be converted into an import.

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

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

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

MIT