To source

@sv/svg-sprites

A reference page.

Compiles svgs in a directory to a spritesheet and make it available as text or blob.

Includes a CustomElement that makes it easy to use any icon.

<svg-icon icon="speaker" />

Or SSR the SVG symbols into the page, for use with <use href="..."/> tags.

---
import { svg } from '@sv/svg-sprites/sheet';
---
<div class="hidden" set:html={await svg()}></div>

Installation

Make sure your project is set up with access to the registry as described in Setup.

bun add @sv/svg-sprites

Usage

Vite configuration

import svgSprite from "@sv/svg-sprites/vite";

export default {
  plugins: [
    svgSprite({ dir: ["assets/icons/*.svg"] }),
  ],
};

Next / Webpack configuration

/** @type {import('next').NextConfig} */
module.exports = {
  webpack(config, options) {
    config.module.rules.push({
      use: [
        {
          loader: "@sv/svg-sprites/loader",
          options: {
            dir: "./assets/icons/*.svg",
          },
        },
      ],
    });

    return config;
  },
};

Component Usage

import "@sv/svg-sprites/svg-icon";
<body>
  <svg-icon icon="speaker" />
</body>

Changelog


0.1.0-dev.0 (2025-10-17)

Breaking Changes

  • Move chart and animation elemnts into own package

0.6.0-dev.0 (2025-10-16)

Breaking Changes

  • Move chart and animation elemnts into own package

0.5.3 (2025-03-28)

Features

  • Support using icons from other packages (svp/atrium!36)

0.5.2 (2025-01-07)

Fixes

  • Optimize svg icon component

0.5.1 (2025-01-06)

Fixes

  • Fix svg code included twice

Full changelog