# svg-asset-loader

> Webpack loader for processing SVG files. Loader options allows 3 options: embedding SVGs directly into the HTML, combining SVGs into a single spritesheet injected into the HTML, or extracting SVGs into an external sprite file for linking.

Latest version **1.2.0** (published 2024-12-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install svg-asset-loader
pnpm add svg-asset-loader
yarn add svg-asset-loader
bun add svg-asset-loader
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2024-12-17 |
| First published | 2024-06-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | heshanera |
| Keywords | webpack, loader, svg, inline, sprites, spritesheet, injection, svg symbol, bundling, svg preprocessing, sprite extraction |

## Links

- npm: https://www.npmjs.com/package/svg-asset-loader
- Repository: https://github.com/heshanera/svg-asset-loader
- Homepage: https://github.com/heshanera/svg-asset-loader#readme
- Issues: https://github.com/heshanera/svg-asset-loader/issues
- npm.io page: https://npm.io/package/svg-asset-loader

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2024-12-17
- 1.1.4 — 2024-08-26
- 1.1.3 — 2024-06-08
- 1.1.2 — 2024-06-08
- 1.1.1 — 2024-06-08
- 1.1.0 — 2024-06-08
- 1.0.0 — 2024-06-07

## README

# svg-asset-loader
Webpack loader for processing SVG files. Loader options allows 3 options: embedding SVGs directly into the HTML, combining SVGs into a single spritesheet injected into the HTML, or extracting SVGs into an external sprite file for linking.

[![Test Build Publish](https://github.com/heshanera/svg-asset-loader/actions/workflows/publish.yml/badge.svg)](https://github.com/heshanera/svg-asset-loader/actions) 
[![Node](https://img.shields.io/badge/NodeJS-v20.10.0-%233C873A)](https://nodejs.org/dist/v20.14.0/docs/api/) 
[![NPM](https://img.shields.io/badge/NPM-v10.2.3-%23CC3534)](https://www.npmjs.com/package/svg-asset-loader?activeTab=readme) 
[![License: MIT](https://img.shields.io/badge/License-MIT-blue)](https://github.com/heshanera/svg-asset-loader/blob/master/LICENSE) 
[![Minzip](https://img.shields.io/bundlephobia/minzip/svg-asset-loader)](https://bundlephobia.com/package/svg-asset-loader) 

## Installation
```bash
npm i svg-asset-loader
```

## Usage

### Spritesheet injection [:link:](https://github.com/heshanera/svg-asset-loader/tree/master/examples/injectSVGs)
```js
// webpack.config.js

const config = {
  ...
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-asset-loader',
      },
    ],
  },
  ...
};

export default config;
```
```js
// index.js

import icon from '../../assets/stop-watch.svg';
import icon2 from '../../assets/coconut-tree.svg';

...
<div>
  <svg viewBox="${icon.viewBox}">
    <use href="#${icon.id}"></use>
  </svg>
  <svg viewBox="${icon2.viewBox}">
    <use href="#${icon2.id}"></use>
  </svg>
</div>
...
```

### Inline [:link:](https://github.com/heshanera/svg-asset-loader/tree/master/examples/inlineSVGs)
```js
// webpack.config.js

const config = {
  ...
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-asset-loader',
        options: {
          strategy: 'inline',
        },
      },
    ],
  },
  ...
};

export default config;
```
```js
// index.js

import icon from '../../assets/stop-watch.svg';
import icon2 from '../../assets/coconut-tree.svg';

...
<div>
  <img src=${icon} height="100px" width="100px" />
  <img src=${icon2} height="100px" width="100px" />
</div>
...
```


### Extraction and linking [:link:](https://github.com/heshanera/svg-asset-loader/tree/master/examples/extractSVGs)
```js
// webpack.config.js

const config = {
  ...
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-asset-loader',
        options: {
          strategy: 'extract',
          outFile: './public/spritesheet.svg',
          prefix: './spritesheet.svg',
        },
      },
    ],
  },
  ...
};

export default config;
```
```js
// index.js

import icon from '../../assets/stop-watch.svg';
import icon2 from '../../assets/coconut-tree.svg';

...
<div>
  <svg viewBox="${icon.viewBox}">
    <use href=${icon.href}></use>
  </svg>
  <svg viewBox="${icon2.viewBox}">
    <use href=${icon2.href}></use>
  </svg>
</div>
...
```

## Loader Options

| Property   | Default | Description |
| ---------- | ------------ | -------- |
| strategy   | `inject`     | SVG loading strategy <br /> Available strategies: `inject`, `extract`, `inline`  |
| outFile    | `sprite.svg` | File name for the generated svg spritesheet <br /> To be used with the `extract` strategy    |
| prefix     | `sprite.svg` | File path to access the generated spritesheet <br /> To be used with the `extract` strategy <br />  href: `{prefix}#{id}`   |

## Running Examples Locally

```bash
# Build the loader
npm run build

# Go to the example directory
cd examples/inlineSVGs/

# Start the server
npm run start
```

---
_Source: https://npm.io/package/svg-asset-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._