{"id":14979136,"url":"https://github.com/brandonklotz/next-image-trace-loader","last_synced_at":"2025-10-28T16:31:18.825Z","repository":{"id":54539691,"uuid":"336695308","full_name":"BrandonKlotz/next-image-trace-loader","owner":"BrandonKlotz","description":"Trace images as SVGs as they load.","archived":false,"fork":false,"pushed_at":"2021-02-13T17:41:58.000Z","size":2995,"stargazers_count":20,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-11T19:20:11.434Z","etag":null,"topics":["image","image-processing","image-trace","jamstack","next","next-images","nextjs","plugin","svgs","vercel"],"latest_commit_sha":null,"homepage":"https://next-image-trace-loader.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BrandonKlotz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-07T03:51:59.000Z","updated_at":"2023-10-20T15:54:19.000Z","dependencies_parsed_at":"2022-08-13T19:10:16.887Z","dependency_job_id":null,"html_url":"https://github.com/BrandonKlotz/next-image-trace-loader","commit_stats":null,"previous_names":["brandonklotz/next-image-trace"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrandonKlotz%2Fnext-image-trace-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrandonKlotz%2Fnext-image-trace-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrandonKlotz%2Fnext-image-trace-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrandonKlotz%2Fnext-image-trace-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BrandonKlotz","download_url":"https://codeload.github.com/BrandonKlotz/next-image-trace-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219859166,"owners_count":16556037,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image","image-processing","image-trace","jamstack","next","next-images","nextjs","plugin","svgs","vercel"],"created_at":"2024-09-24T13:59:20.393Z","updated_at":"2025-10-28T16:31:18.259Z","avatar_url":"https://github.com/BrandonKlotz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Version](https://img.shields.io/badge/stable-1.1.4-blue)\n[![Downloads](https://img.shields.io/npm/dm/next-image-trace-loader.svg)](http://npm-stat.com/charts.html?package=next-image-trace-loader\u0026from=2021-02-02)\n[![MIT License](https://img.shields.io/npm/l/next-image-trace-loader.svg)](http://opensource.org/licenses/MIT)\n\n# Next Image Trace Loader\n\nDisplay a SVG traced image while your images lazy load for NextJS projects.\n\nA wrapper of [`image-trace-loader`](https://github.com/EmilTholin/image-trace-loader) and [`next/image`](https://nextjs.org/docs/api-reference/next/image)\n\nWas 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.\n\nWorks 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`.\n\n## Example\n\nView site:\nhttps://next-image-trace-loader.vercel.app/\n\n## Getting started\n\nInstall the component to your project.\n\n```\nyarn add next-image-trace-loader\n\n# or\n\nnpm install next-image-trace-loader\n```\n\nUpdate your `next.config.js` to trace images as SVGs.\n\n```\n// next.config.js\n\nconst tracedImages = {\n  test: /\\.(png|jpe?g|gif|jp2|webp)$/,\n  use: [\n    {\n      loader: 'image-trace-loader'\n    }\n  ]\n}\n\nmodule.exports = {\n  webpack: (config, options) =\u003e {\n    config.module.rules.push(tracedImages)\n    return config\n  }\n}\n```\n\n## Usage in your project\n\nBasic Usage:\n\n```\nimport ImageTrace from \"next-image-trace-loader\"\nimport ringPlanet from '../public/planet-1.png'\n\nexport default function Home() {\n  return (\n    \u003c\u003e\n      \u003cImageTrace\n        src='/planet-1.png'\n        trace={ringPlanet.trace}\n        nextImageProps={{width: 800, height: 400}}\n      /\u003e\n    \u003c/\u003e\n  )\n}\n```\n\nWhen 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`.\n\n```\nimport ImageTrace from \"next-image-trace-loader\"\nimport ringPlanet from '../public/planet-1.png'\n\nexport default function Home() {\n  return (\n    \u003c\u003e\n      \u003cImageTrace\n        src='/planet-1.png'\n        trace={ringPlanet.trace}\n        width='800px'\n        height='400px'\n        nextImageProps={{layout: 'fill'}}\n      /\u003e\n    \u003c/\u003e\n  )\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandonklotz%2Fnext-image-trace-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrandonklotz%2Fnext-image-trace-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandonklotz%2Fnext-image-trace-loader/lists"}