Sveltekit Sprite
SvelteKit Sprite Plugin
The plugin compiles svg files into a sprite and inline as string to the app template.
- Sprite with symbols from svg files
- Uniq id links in symbols
- Uniq id's for all symbols
- Folder based id's
- Sprite as string in app.html
- SVGO for sprite optimization
Roadmap
☑︎ Build sprite from folder
☑︎ Style id encapsulating
□ Build sprite from files array
□ Error handling
□ File watcher
□ Save sprite to file
□ Unwrap symbols from file in folder
□ Add svg's from @import
Get started
1. Install the plugin
Run npm i -D sveltekit-sprite command.
2. Edit Vite config
Import and configure the plugin in the vite.config.js file:
import { sveltekit } from '@sveltejs/kit/vite';
+ import { sveltekitSprite } from 'sveltekit-sprite';
/** @type {import('vite').UserConfig} */
const config = {
plugins: [
+ sveltekitSprite({…option here}),
sveltekit()
],
};
3. Add label to app template
In app.html add label %vite.plugin.sprite% to point Vite where to inline the svg sprite.
You can change label by injectLabel option.
<body data-sveltekit-preload-data="hover">
+ %vite.plugin.sprite%
<div style="display: contents">%sveltekit.body%</div>
</body>
4. Put your svg files to ./src/lib/sprite/
You can change sprite folder by svgSource option.
5. Run app npm run dev
⚠️ For now sprite will compile once on start app in dev mode or on build. If you want add more symbols to sprite → restart the app.
6. Add link to the specific symbol on your page
Symbols id's will begin with the prefix svg--[subfolder]-[file-name]
You can change symbol prefix by symbolPrefix option.
<svg>
<use xlink:href="#svg--icon" />
</svg>
Options
Default option are presented.
svgoOptions
See SVGO config info on official repo
Additional option presetDefault for disable default plugins
⚠️ If you pass your own presetDefault preset, Svelte-sprite will disable the cleanupIDs option and add the removeViewBox: false option to build the sprite from folder.
⚠️ prefixIds option is always on for build a sprite from a folder with the: prefix option, you can't override it.
sveltekitSprite({
svgoOptions: {
presetDefault: true,
... other option here
},
}),
svgSource
You can use it in two ways:
Path to ready sprite file
On this mode you can optimize your sprite by SVGO options. The symbols id will leave as they are.
Path to folder with svg's files (from project root)
On this mode sprite folder structure represent symbols id as folders router in SveleKit represent addresses of app.
For example: /sprite/icons/star.svg → become → #svg--icons-star
sveltekitSprite({
svgSource: 'src/lib/sprite',
}),
symbolPrefix
From the prefix begin all id of symbols: [symbolPrefix]--[subfolder]-[file-name]
sveltekitSprite({
symbolPrefix: 'svg',
}),
stylePrefix
All id's in the svg files will be replaced by he prefix and file name: [stylePrefix]--[subfolder]-[file-name]
sveltekitSprite({
stylePrefix: 'svg-style',
}),
injectLabel
Label in the app.html template to place the sprite string.
sveltekitSprite({
injectLabel: '%vite.plugin.sprite%',
}),
