# svg-sprites
> Compile svgs in a directory to a spritesheet and make it available as text or blob.
Latest version **0.4.14** (published 2024-10-01) · ISC license · 0 weekly downloads
## Install
```sh
npm install svg-sprites
pnpm add svg-sprites
yarn add svg-sprites
bun add svg-sprites
```
## Health
**Score 40/100 (D)** — status: maintenance-mode.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; pre 1.0.
Negative: stale; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.4.14 |
| Published | 2024-10-01 |
| First published | 2023-01-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 34.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Tim Havlicek |
| Maintainers | luckydye |
| Keywords | svg, sprite, icons |
## Links
- npm: https://www.npmjs.com/package/svg-sprites
- npm.io page: https://npm.io/package/svg-sprites
## Dependencies (2)
- [fast-glob](https://npm.io/package/fast-glob.md) ^3.3.2
- [svg-sprite](https://npm.io/package/svg-sprite.md) ^2.0.4
## Alternatives
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads
## Recent versions
- 0.4.14 (latest) — 2024-10-01
- 0.4.13 — 2024-09-16
- 0.4.12 — 2024-09-16
- 0.4.11 — 2024-09-16
- 0.4.10 — 2024-09-16
- 0.4.9 — 2024-09-16
- 0.4.8 — 2024-09-16
- 0.4.7 — 2024-09-04
- 0.4.6 — 2024-09-04
- 0.4.5 — 2024-09-04
- 0.4.4 — 2024-09-04
- 0.4.3 — 2024-09-04
- 0.4.2 — 2024-09-04
- 0.4.1 — 2024-09-04
- 0.3.0 — 2023-03-07
- … 7 more at https://npm.io/package/svg-sprites/versions
## README
# svg-sprites
Compile 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.
```html
```
Or SSR the SVG symbols into the page.
```typescript
import { svg } from 'svg-sprites/sheet';
```
```html
// nuxt
```
## Vite configuration
```typescript
import svgSprite from "svg-sprites/vite";
export default {
plugins: [
svgSprite({ dir: ["assets/icons/*.svg"] }),
],
};
```
## Next / Webpack configuration
```javascript
/** @type {import('next').NextConfig} */
module.exports = {
webpack(config, options) {
config.module.rules.push({
use: [
{
loader: "svg-sprites/loader",
options: {
dir: "./assets/icons/*.svg",
},
},
],
});
return config;
},
};
```
## Component Usage
Place your SVG files in a directory of choice, by default `/assets/icons/**/*.svg`.
```typescript
// import component
import "svg-sprites/svg-icon";
// ...
```
```html
// use in html
```
## Features/Issues TODO:
- replace string, for replacing a hex color with currentColor for example.
- make sure globs use the correct cwd
- provide an export with a Map of all the symbols to use in JS
- import svg as jsx component?
- generate types for icon names
---
_Source: https://npm.io/package/svg-sprites · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._