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 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()],
}
Here is more information on how to integrate it with your bundler.
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.ts
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