Skip to content

The plugin compile svg files into a sprite and render to the app template

Notifications You must be signed in to change notification settings

rodshtein/sveltekit-sprite

Repository files navigation

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%',
}),

About

The plugin compile svg files into a sprite and render to the app template

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published