Import assets in markup
npm install svelte-preprocess-import-assetsImport assets directly in the markup. Supports Svelte 3, 4, and 5.
> NOTE: Svelte 5 support is experimental and may break between versions.
Convert this:
``svelte`Look at this image

Into this:
`svelte
Usage
Install with your package manager:
`bash
npm install --save-dev svelte-preprocess-import-assets
`Include the preprocessor in your bundler's Svelte plugin
preprocess option:`js
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:$3
- Type:
AssetSource[] | ((defaultSources: AssetSource[]) => AssetSource[])
`ts
interface AssetSource {
tag: string
srcAttributes?: string[]
srcsetAttributes?: string[]
filter?: (metadata: FilterMetadata) => boolean
} interface FilterMetadata {
tag: string
attribute: string
value: string
attributes: Record
}
`- 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.
`js
{
sources: (defaultSources) => {
return [
...defaultSources,
// Also scan data-src and data-srcset of an img tag
{
tag: 'img',
srcAttributes: ['data-src'],
srcsetAttributes: ['data-srcset'],
},
]
},
}
`$3
- Type:
string
- Default: ___ASSET___ The string to be prefixed for asset import names, e.g.
___ASSET___0 and ___ASSET___1.$3
- Type:
boolean
- Default: false Whether a URL with http/https protocol should be converted to an import.
$3
- Type:
(url: string) => boolean Whether a URL should be converted into an import.
`js
{
// Include URLs with specific extensions only
urlFilter: (url) => /\.(png|jpg|gif|webp)$/.test(url),
}
`Recipes
$3
`svelte

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