# spritesmith-webpack-plugin

> It is a webpack-plugin for sprite

Latest version **1.4.0** (published 2021-02-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install spritesmith-webpack-plugin
pnpm add spritesmith-webpack-plugin
yarn add spritesmith-webpack-plugin
bun add spritesmith-webpack-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2021-02-25 |
| First published | 2019-12-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 8.16.0 |
| Dependencies | 9 |
| Unpacked size | 15.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | daipeng7 |
| Maintainers | daipeng7 |
| Keywords | sprite, spritesmith, webpack, webpack-plugin |

## Links

- npm: https://www.npmjs.com/package/spritesmith-webpack-plugin
- Repository: https://github.com/daipeng7/spritesmith-webpack-plugin
- Issues: https://github.com/daipeng7/spritesmith-webpack-plugin/issues
- npm.io page: https://npm.io/package/spritesmith-webpack-plugin

## Dependencies (9)

- [ora](https://npm.io/package/ora.md) ^4.0.3
- [gulp](https://npm.io/package/gulp.md) ^4.0.2
- [rimraf](https://npm.io/package/rimraf.md) ^3.0.0
- [gulp-hash](https://npm.io/package/gulp-hash.md) ^4.2.2
- [gulp-buffer](https://npm.io/package/gulp-buffer.md) ^0.0.2
- [object-hash](https://npm.io/package/object-hash.md) ^2.0.1
- [run-sequence](https://npm.io/package/run-sequence.md) ^2.2.1
- [gulp.spritesmith](https://npm.io/package/gulp.spritesmith.md) ^6.11.0
- [gulp-load-plugins](https://npm.io/package/gulp-load-plugins.md) ^2.0.3

## 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.4.0 (latest) — 2021-02-25
- 1.3.0 — 2021-02-25
- 1.2.0 — 2021-02-25
- 1.1.0 — 2020-05-19
- 1.0.9 — 2020-01-07
- 1.0.8 — 2020-01-07
- 1.0.7 — 2019-12-26
- 1.0.6 — 2019-12-16
- 1.0.5 — 2019-12-16
- 1.0.4 — 2019-12-11
- 1.0.3 — 2019-12-11
- 1.0.2 — 2019-12-11
- 1.0.1 — 2019-12-10
- 1.0.0 — 2019-12-10

## README

<!--
 * @Author: daipeng
 * @Date: 2019-12-10 17:48:26
 * @LastEditors: VSCode
 * @LastEditTime: 2019-12-11 15:50:27
 * @Description: 
 -->
# spritesmith-webpack-plugin


> It is a webpack-plugin for sprite

## Installation

```shell
npm i spritesmith-webpack-plugin -D
```

## Usage
```js
{
  plugins: [
    new SpritesmithWebpackPlugin({
      prefix: 'icon',
      rootPrefix: 'index',
      resultImageType: 'png',
      resultCssType: 'css',
      padding: 6,
      retinaIdentifier: '@2x',
      retinaDPR: 2,
      minResolution: 192,
      unit: 'px',
      hash: false,
      watch: false,
      paths: {
        source: resolve('src/assets/sprite'),
        result: resolve('src/style/sprite'),
        resultCss: resolve('src/style/sprite/css'),
        resultImage: resolve('src/style/sprite/images')
      },
      success() {
        // TODO
      }
    })
  ]
}
```
## Options
### prefix
default: icon
css className prefix, fore example:
> .icon-home-down{ width: 20px; height: 31px; background-position: 0px -70px; }

### rootPrefix
default: index
css className rootPrefix

### resultImageType
default: png
the type of result images

### resultCssType
default: css
the padding value of result images

### retinaIdentifier
default: @2x
the identifier of image filter for retina

### retinaDPR, minResolution
default: retinaDPR = 2, minResolution = 192
```css
@media(-webkit-min-device-pixel-ratio:2),(min-resolution: 192dpi){
	.icon-home-down,.icon-home-good,.icon-home-triangle-right,.icon-home-update {
		display:inline-block;
		background-repeat:no-repeat;
		background-image:url("../images/home@2x.png?t=1575970989349");
		background-size: 116px 101px;
	}
}
```
### unit
default: px

### hash
default: false
whether hash value is required

### watch
default: false
this can watch images by directory.
### paths
```js
{
  source: resolve('src/assets/sprite'),
  result: resolve('src/style/sprite'),
  resultCss: resolve('src/style/sprite/css'),
  resultImage: resolve('src/style/sprite/images')
}
```
### success
default: null

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