# srcset-codegen

> CLI to generates typescript srcset, width, height attributes from images in a directory

Latest version **1.0.18** (published 2024-05-31) · ISC license · 0 weekly downloads

## Install

```sh
npm install srcset-codegen
pnpm add srcset-codegen
yarn add srcset-codegen
bun add srcset-codegen
```

Provides the command `srcset-codegen`.

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.18 |
| Published | 2024-05-31 |
| First published | 2024-04-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 8.3 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | schpet |
| Maintainers | schpet |
| Keywords | codegen, images |

## Links

- npm: https://www.npmjs.com/package/srcset-codegen
- Repository: https://github.com/schpet/srcset-codegen
- Homepage: https://github.com/schpet/srcset-codegen#readme
- Issues: https://github.com/schpet/srcset-codegen/issues
- npm.io page: https://npm.io/package/srcset-codegen

## Dependencies (3)

- [clerc](https://npm.io/package/clerc.md) ^0.44.0
- [image-size](https://npm.io/package/image-size.md) ^1.1.1
- [@parcel/watcher](https://npm.io/package/@parcel/watcher.md) ^2.4.1

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.0.18 (latest) — 2024-05-31
- 1.0.17 — 2024-05-31
- 1.0.16 — 2024-05-27
- 1.0.15 — 2024-05-26
- 1.0.14 — 2024-05-26
- 1.0.13 — 2024-05-26
- 1.0.12 — 2024-05-26
- 1.0.11 — 2024-05-26
- 1.0.10 — 2024-05-26
- 1.0.9 — 2024-05-26
- 1.0.8 — 2024-05-26
- 1.0.7 — 2024-05-02
- 1.0.6 — 2024-05-01
- 1.0.5 — 2024-04-30
- 1.0.4 — 2024-04-30
- … 2 more at https://npm.io/package/srcset-codegen/versions

## README

# SRCSET CODEGEN

generates typescript for a images scaled at different [scale factors](https://developer.apple.com/design/human-interface-guidelines/images#Resolution) with filenames ending in @2x, @3x and so on.

```diff
 .
 ├── sd
+│   ├── smile.ts
 │   ├── smile.png
 │   ├── smile@2x.png
 │   └── smile@3x.png
+├── single.ts
+├── smile.ts
+├── vector.ts
 ├── single.png
 ├── smile.png
 ├── smile@2x.png

```

example of generated code:

```ts
// generated by srcset-codegen
import src from "./smile.png";
import src2x from "./smile@2x.png";
import src3x from "./smile@3x.png";

const width = 107;
const height = 107;
const srcSet = `${src2x} 2x, ${src3x} 3x`;
export default { src, width, height, srcSet };
```

## Usage

```bash
npx srcset-codegen generate src/images

# or, to watch for filesystem changes
npx srcset-codegen generate --watch src/images
```

## Notes

inspired by [react-native images](https://reactnative.dev/docs/images).

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