# sprite-tool

> 自动生成雪碧图的工具

Latest version **1.0.1** (published 2020-04-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install sprite-tool
pnpm add sprite-tool
yarn add sprite-tool
bun add sprite-tool
```

## 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.0.1 |
| Published | 2020-04-12 |
| First published | 2019-08-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ccz |
| Maintainers | ccz284942955 |

## Links

- npm: https://www.npmjs.com/package/sprite-tool
- Repository: https://github.com/ccz-Eric/sprite-tool
- Homepage: https://github.com/ccz-Eric/sprite-tool#readme
- Issues: https://github.com/ccz-Eric/sprite-tool/issues
- npm.io page: https://npm.io/package/sprite-tool

## Dependencies (1)

- [webpack-spritesmith](https://npm.io/package/webpack-spritesmith.md) ^1.0.1

## Recent versions

- 1.0.1 (latest) — 2020-04-12
- 1.0.0 — 2020-04-12
- 0.8.8 — 2019-09-25
- 0.8.7 — 2019-09-25
- 0.8.5 — 2019-08-05
- 0.8.3 — 2019-08-05
- 0.8.2 — 2019-08-05
- 0.8.1 — 2019-08-05

## README

sprite-tool 自动生成雪碧图和对应图片的scss文件
===

#### 大部分loader和plugin可以把多张png或者svg打包成一张图片。这样做，图片体积往往会过大，所有页面的图片，都要等待这张被整合后的图片加载完以后才会出现。sprite-tool可以根据你的文件路径分配，帮你生成不同的雪碧图和scss文件。

### 简述

###### 1.以webpack-spritesmith为基础加工而成
###### 2.自动合成雪碧图
###### 3.支持2x，3x图同时引入,生成两份雪碧图
###### 4.isRetina为true时，图片名字格式例子：`example.png`(2x) `example@3x.png`(3x)
###### 5.开启isRetina时，图片名字需要严格按上述格式，否则无法生成。不开启isRetina时，图片名字不做要求。
###### 6.图片私自转换格式，比如jpg后缀格式修改为png，会导致无法生成雪碧图



### npm安装

```
npm install sprite-tool  --save
```


### 使用方式
```
const spriteTool=require('sprite-tool')
let sprite = new spriteTool({
    iconPath:'src/image',      //目标路径 default：src/image
    targetPath:'src/sprite',  //生成路径 default：src/sprite
    name:'index',            //生成文件名  default：index
    isRetina:false          // 是否开启三倍图模式 default:false
    isRem:true             //是否使用rem
})
sprite.run()

tip：在当前用到sprite的文件里面，引用scss资源，不要在全局一次性引入，保证scss按需引入。
     图片资源只有在被使用到时才会引入，引入scss时不会引入相关图片。
```


### image文件路径
```
/
|-src
| |-image
| | |-detail
      |-example3.png
      |-example4.png
| | |-example1.png
| | |-example2.png
```

### sprite生成路径
```
/
|-src
| |-image
| | |-detail
      |-example3.png
      |-example4.png
| | |-example1.png
| | |-example2.png
  |-sprite
    |-detail
      |-index.png
      |-index.scss
    |-index.png
    |-index.scss
```

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