Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rodshtein/sveltekit-sprite
The plugin compile svg files into a sprite and render to the app template
https://github.com/rodshtein/sveltekit-sprite
plugin sveltekit svgo
Last synced: 15 days ago
JSON representation
The plugin compile svg files into a sprite and render to the app template
- Host: GitHub
- URL: https://github.com/rodshtein/sveltekit-sprite
- Owner: rodshtein
- Created: 2022-12-27T10:18:50.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T13:16:39.000Z (about 2 years ago)
- Last Synced: 2025-01-06T06:05:54.626Z (about 2 months ago)
- Topics: plugin, sveltekit, svgo
- Language: TypeScript
- Homepage:
- Size: 184 KB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```diff
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](#injectlabel) option.
```diff
+ %vite.plugin.sprite%
%sveltekit.body%
```
**4. Put your svg files to `./src/lib/sprite/`**
You can change sprite folder by [svgSource](#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](#symbolprefix) option.
```html
```
## Options
Default option are presented.
### svgoOptions
See SVGO config info on [official repo](https://github.com/svg/svgo)
Additional option `presetDefault` for disable [default plugins](https://github.com/svg/svgo#default-preset)
⚠️ 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.
```javascript
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`
```javascript
sveltekitSprite({
svgSource: 'src/lib/sprite',
}),
```
### symbolPrefix
From the prefix begin all id of symbols: `[symbolPrefix]--[subfolder]-[file-name]`
```javascript
sveltekitSprite({
symbolPrefix: 'svg',
}),
```
### stylePrefix
All id's in the svg files will be replaced by he prefix and file name: `[stylePrefix]--[subfolder]-[file-name]`
```javascript
sveltekitSprite({
stylePrefix: 'svg-style',
}),
```
### injectLabel
Label in the app.html template to place the sprite string.
```javascript
sveltekitSprite({
injectLabel: '%vite.plugin.sprite%',
}),
```