# rollup-plugin-mock-spritesmith

> It is a rollup plugin for sprite

Latest version **1.4.0** (published 2023-12-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install rollup-plugin-mock-spritesmith
pnpm add rollup-plugin-mock-spritesmith
yarn add rollup-plugin-mock-spritesmith
bun add rollup-plugin-mock-spritesmith
```

## 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 | 2023-12-28 |
| First published | 2023-12-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 8.16.0 |
| Dependencies | 9 |
| Unpacked size | 14.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | daipeng7 |
| Maintainers | daipeng7 |
| Keywords | sprite, spritesmith, rollup, rollup-plugin |

## Links

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

## 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) — 2023-12-28

## README

# rollup-plugin-spritesmith

> It is a rollup plugin for sprite

## Installation

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

## Usage

```js
{
  plugins: [
    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/rollup-plugin-mock-spritesmith · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._