# gatsby-plugin-svg-sprites

> Gatsby plugin to generate SVG sprites from imported files

Latest version **5.0.1** (published 2023-03-10) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install gatsby-plugin-svg-sprites
pnpm add gatsby-plugin-svg-sprites
yarn add gatsby-plugin-svg-sprites
bun add gatsby-plugin-svg-sprites
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 5.0.1 |
| Published | 2023-03-10 |
| First published | 2021-08-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 7.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | stldo |
| Maintainers | stldo |
| Keywords | gatsby, gatsby-plugin, svg, sprite, svg sprite |

## Links

- npm: https://www.npmjs.com/package/gatsby-plugin-svg-sprites
- Repository: https://github.com/stldo/gatsby-plugin-svg-sprites
- Homepage: https://github.com/stldo/gatsby-plugin-svg-sprites#readme
- Issues: https://github.com/stldo/gatsby-plugin-svg-sprites/issues
- npm.io page: https://npm.io/package/gatsby-plugin-svg-sprites

## Dependencies (2)

- [incstr](https://npm.io/package/incstr.md) ^1.2.3
- [external-svg-sprite-loader](https://npm.io/package/external-svg-sprite-loader.md) ^7.2.0

## Recent versions

- 5.0.1 (latest) — 2023-03-10
- 5.0.0 — 2023-03-10
- 4.3.1 — 2022-05-15
- 4.3.0 — 2022-03-09
- 4.2.2 — 2022-02-15
- 4.2.1 — 2022-02-06
- 4.2.0 — 2022-01-29
- 4.1.0 — 2021-12-12
- 4.0.0 — 2021-12-10
- 0.0.2 — 2021-08-02
- 0.0.1 — 2021-08-01

## README

# gatsby-plugin-svg-sprites [![npm][1]][2]

> ⚠️ If you are getting "sprites.[contenthash].svg" URLs in production, please
> check the "[Known issues][3]" section for possible solutions.

Gatsby plugin to generate SVG sprites from imported files. The sprites are
generated using [External SVG Sprite][4].

## Installation

```sh
npm install gatsby-plugin-svg-sprites
```

## Usage

```js
/* gatsby-config.js */

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-svg-sprites'
      options: {
        /* gatsby-plugin-svg-sprites options here */
      }
    }
  ]
}
```

### JavaScript import

```js
import React from 'react'
import icon from 'images/icon.svg'

export default () => (
  <svg viewBox={icon.viewBox}>
    <use xlinkHref={icon.url}/>
  </svg>
)
```

### CSS

```css
.icon {
  background-image: url('images/icon.svg') no-repeat 0;
}
```

## Options

### minifyIds

Type: `boolean`. Default: `process.env.NODE_ENV === 'production'`.

Minify symbol ids, enabled if `process.env.NODE_ENV === 'production'` by
default.

### pluginOptions

Type: `Object`. Default: `{}`.

The `pluginOptions` parameter is passed to __External SVG Sprite__ plugin.

### randomContentHash

Type: `boolean`. Default: `false`.

Allow this plugin to replace `'[contenthash]'` placeholder in the `name`
property with a random hash.

### External SVG Sprite options

Any other option passed to `gatsby-plugin-svg-sprites` will be passed to
`external-svg-sprite-loader` — more info about its options can be found
[here][5]. By default, this plugin will set the following options:

```js
{
  iconName: '[name]--[hash:base64:5]',
  name: 'sprites.[contenthash].svg'
}
```

> Note: if `minifyIds` is set to `true`, `iconName` will be ignored.

## Known issues

There's an issue that affects some projects, where the underlying loader renders
the source content before the plugin processes the path strings — resulting in
SVG URLs like "sprites.[contenthash].svg", and thus 404 responses. There are two
ways to circumvent this issue: removing any webpack placeholder from the `name`
option — setting it to something like "sprites.svg"; or setting
`randomContentHash` option to `true` — it enables this plugin to replace the
"[contenthash]" placeholder in the `name` property with random hashes. If you
are using Netlify or another service that implements HTTP ETags for cache
invalidation, you can safely use a plain filename like `sprites.svg`. Otherwise,
enabling `randomContentHash` could be a better choice.

## License

[The MIT License][license]

[1]: https://img.shields.io/npm/v/gatsby-plugin-svg-sprites
[2]: https://www.npmjs.com/package/gatsby-plugin-svg-sprites
[3]: #known-issues
[4]: https://github.com/bensampaio/external-svg-sprite-loader
[5]: https://github.com/bensampaio/external-svg-sprite-loader#options
[license]: ./LICENSE

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