srcset-codegen

SRCSET CODEGEN

generates typescript for a images scaled at different scale factors with filenames ending in @2x, @3x and so on.

 .
 ├── 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:

// 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

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.