# @svelte-put/inline-svg

> solution to inline SVGs in svelte land

Latest version **4.0.2** (published 2025-09-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @svelte-put/inline-svg
pnpm add @svelte-put/inline-svg
yarn add @svelte-put/inline-svg
bun add @svelte-put/inline-svg
```

## Health

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

Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 4.0.2 |
| Published | 2025-09-10 |
| First published | 2023-02-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 31.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 1037 |
| Author | Quang Phan |
| Maintainers | vnphanquang |
| Keywords | svelte, action, svg, inline, dynamic, static, build, runtime, vite, preprocessor, static, compiletime |

## Links

- npm: https://www.npmjs.com/package/@svelte-put/inline-svg
- Repository: https://github.com/vnphanquang/svelte-put
- Homepage: https://github.com/vnphanquang/svelte-put/tree/main/packages/inline-svg
- Issues: https://github.com/vnphanquang/svelte-put/issues
- npm.io page: https://npm.io/package/@svelte-put/inline-svg

## Dependencies (6)

- [svg-parser](https://npm.io/package/svg-parser.md) ^2.0.4
- [zimmerframe](https://npm.io/package/zimmerframe.md) ^1.1.2
- [magic-string](https://npm.io/package/magic-string.md) ^0.30.14
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [hast-util-to-html](https://npm.io/package/hast-util-to-html.md) ^9.0.3
- [svelte-parse-markup](https://npm.io/package/svelte-parse-markup.md) ^0.1.5

## 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

- 4.0.2 (latest) — 2025-09-10
- 4.0.0-next.5 (next) — 2024-10-08
- 4.0.1 — 2025-01-17
- 4.0.0 — 2024-10-25
- 4.0.0-next.4 — 2024-10-04
- 4.0.0-next.3 — 2024-08-10
- 4.0.0-next.2 — 2024-06-15
- 4.0.0-next.1 — 2024-06-13
- 4.0.0-next.0 — 2024-05-31
- 3.0.1 — 2024-05-17
- 3.0.0 — 2023-07-16
- 2.0.0 — 2023-04-11
- 1.0.0 — 2023-02-25

## README

<div align="center">

# `@svelte-put/inline-svg`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs]

Svelte action `use:inlineSvg` for inlining dynamic SVGs (fetched from network)

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Dynamic SVGs - Svelte Action

```html
<script>
  import { inlineSvg } from '@svelte-put/inline-svg';
</script>

<svg use:inlineSvg={'https://example.com/icon.svg'}></svg>
```

## Static SVGs - Vite Plugin / Svelte Preprocessor

### Vite Plugin

To inline static SVGs during build time, use the exported Vite plugin:

```javascript
// vite.config.js
import path from 'path';
import { inlineSvg } from '@svelte-put/inline-svg/vite';

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [inlineSvg(), sveltekit()],
};
export default config;
```

### Bare Preprocessor

The Svelte preprocessor is what is used internally by the aforementioned Vite plugin, which is the recommended. However, if your setup requires using the preprocessor directly, you can do so:

```javascript
// svelte.config.js
import { inlineSvg } from '@svelte-put/inline-svg/preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: [inlineSvg()],
};
export default config;
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/inline-svg/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/inline-svg
[npm]: https://www.npmjs.com/package/@svelte-put/inline-svg
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/inline-svg?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/inline-svg
[docs]: https://svelte-put.vnphanquang.com/docs/inline-svg
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue

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