Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yuan66-hub/unplugin-image-convert
Image Multi Format Conversion Plugin Based on Sharp
https://github.com/yuan66-hub/unplugin-image-convert
sharp unplugin vite webpack
Last synced: 3 months ago
JSON representation
Image Multi Format Conversion Plugin Based on Sharp
- Host: GitHub
- URL: https://github.com/yuan66-hub/unplugin-image-convert
- Owner: yuan66-hub
- Created: 2024-09-02T10:14:31.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-09-12T07:31:19.000Z (4 months ago)
- Last Synced: 2024-10-01T04:40:57.102Z (4 months ago)
- Topics: sharp, unplugin, vite, webpack
- Language: TypeScript
- Homepage:
- Size: 35.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vite - @yuanjianming/unplugin-image-convert - Image multi format conversion plugin based on sharp.js. (Plugins / Framework-agnostic Plugins)
- fucking-awesome-vite - @yuanjianming/unplugin-image-convert - Image multi format conversion plugin based on sharp.js. (Plugins / Framework-agnostic Plugins)
README
# ✨ unplugin-image-convert
## 📦 Install
```bash
npm add @yuanjianming/unplugin-image-convert -D
```
## 💪 Basic Use
- vite.config.js
```js
import { defineConfig } from 'vite'
import { viteImageConvert } from '@yuanjianming/unplugin-image-convert'
export default defineConfig({
//....
plugins: [viteImageConvert({
test:/\.(jpe?g|png)$/,
encodeOptions:{
webp:{
// https://sharp.pixelplumbing.com/api-output#webp
},
avif:{
// https://sharp.pixelplumbing.com/api-output#avif
}
}
})],
})
```
- webpack.config.js
```js
const { webpackImageConvert } =require('@yuanjianming/unplugin-image-convert')
module.exports ={
plugins:[
webpackImageConvert({
test:/\.(jpe?g|png)$/,
encodeOptions:{
webp:{
// https://sharp.pixelplumbing.com/api-output#webp
},
avif:{
// https://sharp.pixelplumbing.com/api-output#avif
}
}
})
]
}
```
## 👨💻 Config
| option | type | default | describe |
| ---- | ---- | ---- | ---- |
| `test` | `RegExp` | '' | Regular expression for image resource file path
| `encodeOptions` | `SharpOutputOption` | `webp:{},avif:{}` | Support format conversion for `jpeg`, `png`, `webp`, `avif`, `heif`, `jxl`, `gif`, `Jp2`, and `tif`
## 💪 Default Config
```js
{
test:/\.(jpe?g|png)$/,
encodeOptions:{
webp:{
// https://sharp.pixelplumbing.com/api-output#webp
},
avif:{
// https://sharp.pixelplumbing.com/api-output#avif
}
}
}
```