https://github.com/cijiugechu/vite-plugin-thumbhash

Bring ThumbHash to your vite project.
https://github.com/cijiugechu/vite-plugin-thumbhash

image image-processing napi-rs thumbhash thumbnail vite vite-plugin

Last synced: 8 days ago
JSON representation

Bring ThumbHash to your vite project.

• Host: GitHub
• URL: https://github.com/cijiugechu/vite-plugin-thumbhash
• Owner: cijiugechu
• License: mit
• Created: 2023-03-27T05:12:52.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-27T11:29:50.000Z (about 1 month ago)
• Last Synced: 2024-10-08T09:51:25.606Z (about 1 month ago)
• Topics: image, image-processing, napi-rs, thumbhash, thumbnail, vite, vite-plugin
• Language: TypeScript
• Homepage:
• Size: 1.11 MB
• Stars: 10
• Watchers: 1
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# `vite-plugin-thumbhash`

Add [ThumbHash](https://github.com/evanw/thumbhash) to your vite project.

## Install

```shell

npm install vite-plugin-thumbhash --save-dev

```

```shell

pnpm add vite-plugin-thumbhash -D

```

## Usage

```ts

import { defineConfig } from 'vite'

import { thumbHash } from 'vite-plugin-thumbhash'

export default defineConfig({

  plugins: [thumbHash()]

})

```

```jsx

import Image from 'example.jpg?thumb'

//...



// If you want to import original image



```

## TypeScript IntelliSense

Add the following code to `vite-env.d.ts` :

```ts

/// 

```

## Options

```ts

type Options =

    {

      /**

       * A picomatch pattern, or array of patterns, 

       * which specifies the files in the build the plugin should operate on. 

       */

      include?: Array | string | RegExp

      /**

       * A picomatch pattern, or array of patterns,

       * which specifies the files in the build the plugin should ignore.

       */

      exclude?: Array | string | RegExp

      /**

       * type OutputExtension = 'png' | 'jpg' | 'webp' | 'avif'

       * @default: 'png'

       */

      outputExtension?: OutputExtension

    }

```

## Example

see [playground](/packages/playground/)

## License

MIT © [nemurubaka](https://github.com/cijiugechu)