Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/BrandonKlotz/next-image-trace-loader
Trace images as SVGs as they load.
https://github.com/BrandonKlotz/next-image-trace-loader
image image-processing image-trace jamstack next next-images nextjs plugin svgs vercel
Last synced: 7 days ago
JSON representation
Trace images as SVGs as they load.
- Host: GitHub
- URL: https://github.com/BrandonKlotz/next-image-trace-loader
- Owner: BrandonKlotz
- License: mit
- Created: 2021-02-07T03:51:59.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-02-13T17:41:58.000Z (almost 4 years ago)
- Last Synced: 2025-01-14T23:17:54.229Z (7 days ago)
- Topics: image, image-processing, image-trace, jamstack, next, next-images, nextjs, plugin, svgs, vercel
- Language: TypeScript
- Homepage: https://next-image-trace-loader.vercel.app
- Size: 2.86 MB
- Stars: 20
- Watchers: 2
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: MIT-LICENSE
Awesome Lists containing this project
README
![Version](https://img.shields.io/badge/stable-1.1.4-blue)
[![Downloads](https://img.shields.io/npm/dm/next-image-trace-loader.svg)](http://npm-stat.com/charts.html?package=next-image-trace-loader&from=2021-02-02)
[![MIT License](https://img.shields.io/npm/l/next-image-trace-loader.svg)](http://opensource.org/licenses/MIT)# Next Image Trace Loader
Display a SVG traced image while your images lazy load for NextJS projects.
A wrapper of [`image-trace-loader`](https://github.com/EmilTholin/image-trace-loader) and [`next/image`](https://nextjs.org/docs/api-reference/next/image)
Was truly inspired by Gatsby sites that use [Image Trace](https://using-gatsby-image.gatsbyjs.org/traced-svg/) and wanted to achieve the same look in my Next projects.
Works out of the box with Next 10, if you need more customization you may want to copy the source and import the dependencies `image-trace-loader`, `file-loader`, and `url-loader`.
## Example
View site:
https://next-image-trace-loader.vercel.app/## Getting started
Install the component to your project.
```
yarn add next-image-trace-loader# or
npm install next-image-trace-loader
```Update your `next.config.js` to trace images as SVGs.
```
// next.config.jsconst tracedImages = {
test: /\.(png|jpe?g|gif|jp2|webp)$/,
use: [
{
loader: 'image-trace-loader'
}
]
}module.exports = {
webpack: (config, options) => {
config.module.rules.push(tracedImages)
return config
}
}
```## Usage in your project
Basic Usage:
```
import ImageTrace from "next-image-trace-loader"
import ringPlanet from '../public/planet-1.png'export default function Home() {
return (
<>
>
)
}
```When using `layout=fill` with `next/image` we need to send in `width` and `height` properties that will be styled on the `divs` that wrap the `images`.
```
import ImageTrace from "next-image-trace-loader"
import ringPlanet from '../public/planet-1.png'export default function Home() {
return (
<>
>
)
}
```