https://github.com/schpet/srcset-codegen
generate typescript files from a directory of images with width, height and srcset attributes
https://github.com/schpet/srcset-codegen
codegen react srcset vite
Last synced: 14 days ago
JSON representation
generate typescript files from a directory of images with width, height and srcset attributes
- Host: GitHub
- URL: https://github.com/schpet/srcset-codegen
- Owner: schpet
- Created: 2024-04-30T17:23:46.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-31T14:56:42.000Z (about 1 year ago)
- Last Synced: 2025-06-21T10:07:17.565Z (14 days ago)
- Topics: codegen, react, srcset, vite
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/srcset-codegen
- Size: 247 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.markdown
Awesome Lists containing this project
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
│ ├── [email protected]
│ └── [email protected]
+├── single.ts
+├── smile.ts
+├── vector.ts
├── single.png
├── smile.png
├── [email protected]
```
example of generated code:
```ts
// generated by srcset-codegen
import src from "./smile.png";
import src2x from "./[email protected]";
import src3x from "./[email protected]";
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).