sveltekit-sprite

v0.1.2

Published

2 years ago

The plugin inline SVG into SvelteKit app template

Downloads

133

0High
0Medium
0Low

misharodshtein

sveltekit-plugin svg svgo svelte sveltekit sprite svg-sprite inline-svg inline

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme