# @mcansh/vite-plugin-svg-sprite

> this vite plugin will transform any imported svg files and combine them into an svg sprite sheet

Latest version **0.7.1** (published 2025-09-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mcansh/vite-plugin-svg-sprite
pnpm add @mcansh/vite-plugin-svg-sprite
yarn add @mcansh/vite-plugin-svg-sprite
bun add @mcansh/vite-plugin-svg-sprite
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance.

Warnings: low downloads; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.7.1 |
| Published | 2025-09-22 |
| First published | 2024-04-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18.0.0 |
| Dependencies | 5 |
| Unpacked size | 33.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 29 |
| Author | Logan McAnsh |
| Maintainers | mcansh |

## Links

- npm: https://www.npmjs.com/package/@mcansh/vite-plugin-svg-sprite
- Repository: https://github.com/mcansh/vite-plugin-svg-sprite
- Homepage: https://github.com/mcansh/vite-plugin-svg-sprite#readme
- Issues: https://github.com/mcansh/vite-plugin-svg-sprite/issues
- Funding: https://github.com/sponsors/mcansh
- npm.io page: https://npm.io/package/@mcansh/vite-plugin-svg-sprite

## Dependencies (5)

- [svgo](https://npm.io/package/svgo.md) ^4.0.0
- [hasha](https://npm.io/package/hasha.md) ^6.0.0
- [chokidar](https://npm.io/package/chokidar.md) ^4.0.3
- [fs-extra](https://npm.io/package/fs-extra.md) ^11.3.0
- [svgstore](https://npm.io/package/svgstore.md) ^3.0.1

## Recent versions

- 0.7.1 (latest) — 2025-09-22
- 0.0.0-experimental-95f3d71 (experimental) — 2024-04-19
- 0.7.0 — 2025-07-01
- 0.6.0 — 2025-05-05
- 0.5.0 — 2024-10-25
- 0.0.0-experimental-db387f1 — 2024-04-19
- 0.0.0-experimental-3b96418 — 2024-04-19

## README

# @mcansh/vite-plugin-svg-sprite

this vite plugin will transform any imported svg files and combine them into an svg sprite sheet

## installation and set up

```sh
npm i -D @mcansh/vite-svg-sprite-plugin
```

this is an example using Remix, but this plugin works with any vite configuration

```ts
import { svgSprite } from "@mcansh/vite-plugin-svg-sprite";
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [remix(), tsconfigPaths(), svgSprite()],
});
```

you can configure the generated sprite file name as well as the generated symbol id pattern

```ts
import { DEFAULT_COPY_ATTRS, svgSprite } from "@mcansh/vite-plugin-svg-sprite";

svgSprite({
  spriteOutputName: "sprite.svg",
  symbolId: "icon-[name]-[hash]",
  svgstoreOptions: {
    copyAttrs: [
      ...DEFAULT_COPY_ATTRS,
      // any additional attributes you want to copy from the svg to the symbol
    ],
  },
});
```

## usage

```tsx
import spriteUrl from "virtual:@mcansh/vite-plugin-svg-sprite";
import linkIconHref from "@primer/octicons/build/svg/link-16.svg";
import type { LinksFunction } from "@remix-run/node";

export const links: LinksFunction = () => {
  return [
    { rel: "preload", as: "image", href: spriteUrl, type: "image/svg+xml" },
  ];
};

export default function Component() {
  return (
    <svg className="size-4" aria-hidden>
      <use href={linkIconHref} />
    </svg>
  );
}
```

---
_Source: https://npm.io/package/@mcansh/vite-plugin-svg-sprite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._