svelte-preprocess-import-assets
Import assets directly in the markup.
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()] })
export default {
preprocess: [importAssets()],
}
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,
{
tag: 'img',
srcAttributes: ['data-src'],
srcsetAttributes: ['data-srcset'],
},
]
},
}
importPrefix
http
urlFilter
-
Type: (url: string) => boolean
Whether a URL should be converted into an import.
{
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
License
MIT