{"_id":"turbopack-inline-svg-loader","_rev":"3-b788dfb37013a3bc387b6f1d1acca661","name":"turbopack-inline-svg-loader","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.1":{"name":"turbopack-inline-svg-loader","version":"1.0.1","keywords":["turbopack","inline","svg","loader","dimensions"],"license":"MIT","_id":"turbopack-inline-svg-loader@1.0.1","maintainers":[{"name":"vitalets","email":"noginsk@rambler.ru"}],"homepage":"https://github.com/vitalets/turbopack-inline-svg-loader#readme","bugs":{"url":"https://github.com/vitalets/turbopack-inline-svg-loader/issues"},"dist":{"shasum":"85abe3c6e68166a3a229b3f129b1a26c080d7d85","tarball":"https://registry.npmjs.org/turbopack-inline-svg-loader/-/turbopack-inline-svg-loader-1.0.1.tgz","fileCount":4,"integrity":"sha512-kOCRhwr1szJSqX0XYtF9cGayGrRCpSuhYt2g+2a/ayaLf3u8RluXeKzzOlelOiheA+Lm/HvH8z+9sgMTIPXS9g==","signatures":[{"sig":"MEQCIC6fYgnSCXsNETJe+MAXhzFjupAD8WU3YOOxhE9HO9CWAiAYYVwUUxquoH8uMNVATpbvvOrpKQtvdB+rYz1L5QcsmA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7568},"main":"./src/index.js","type":"commonjs","funding":"https://github.com/sponsors/vitalets","gitHead":"221b2d69248c2250976436923fb227b77d96d2ab","scripts":{"prettier":"prettier --check --ignore-unknown .","release:patch":"npm version patch && npm publish && git push --follow-tags"},"_npmUser":{"name":"vitalets","email":"noginsk@rambler.ru"},"prettier":{"semi":true,"useTabs":false,"tabWidth":2,"printWidth":100,"singleQuote":true,"trailingComma":"all","bracketSpacing":true},"repository":{"url":"git+https://github.com/vitalets/turbopack-inline-svg-loader.git","type":"git"},"_npmVersion":"11.6.0","description":"A Turbopack loader to import SVG as optimized data URI with dimensions","directories":{},"_nodeVersion":"20.18.3","dependencies":{"svgo":"^4.0.0","image-size":"^2.0.2","mini-svg-data-uri":"^1.4.4"},"_hasShrinkwrap":false,"devDependencies":{"prettier":"^3.6.2","@types/node":"^18.15.0"},"_npmOperationalInternal":{"tmp":"tmp/turbopack-inline-svg-loader_1.0.1_1763057945597_0.6751126895062787","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"turbopack-inline-svg-loader","version":"1.0.2","keywords":["turbopack","inline","svg","loader","dimensions"],"license":"MIT","_id":"turbopack-inline-svg-loader@1.0.2","maintainers":[{"name":"vitalets","email":"noginsk@rambler.ru"}],"homepage":"https://github.com/vitalets/turbopack-inline-svg-loader#readme","bugs":{"url":"https://github.com/vitalets/turbopack-inline-svg-loader/issues"},"dist":{"shasum":"ab29c92b54ba945d01141f473eff6fefe3b95390","tarball":"https://registry.npmjs.org/turbopack-inline-svg-loader/-/turbopack-inline-svg-loader-1.0.2.tgz","fileCount":4,"integrity":"sha512-t7lJ9cok+e2bID/B19BfgWa9MhDIfeDwFAuL15K7I/SjrSaBXhcyVovzPkmaOgKAYPoKvMcbKnfnb+HqCsL+wg==","signatures":[{"sig":"MEYCIQDSWngpCToVyyDRDkvyofPyIBcFNK0SLrwyJKLv7UYcpgIhALYQ/2d7udoYvxf7f1OfhmMK8zZpbUq8HoG849jJesjO","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/turbopack-inline-svg-loader@1.0.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":8473},"main":"./src/index.js","type":"commonjs","funding":"https://github.com/sponsors/vitalets","gitHead":"4bbfee798ea56e73e142b1ed76f40cd5e9b4a1d1","scripts":{"prettier":"prettier --check --ignore-unknown --ignore-path=example/.gitignore .","prettier:w":"prettier --write --ignore-unknown --ignore-path=example/.gitignore ."},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:b87609c0-ac39-48eb-a24a-58cd9578acbe"}},"prettier":{"semi":true,"useTabs":false,"tabWidth":2,"printWidth":100,"singleQuote":true,"trailingComma":"all","bracketSpacing":true},"release-it":{"git":{"pushArgs":"--no-verify","commitArgs":"--no-verify"},"npm":{"skipChecks":true},"github":{"release":true}},"repository":{"url":"git+https://github.com/vitalets/turbopack-inline-svg-loader.git","type":"git"},"_npmVersion":"11.6.4","description":"A Turbopack loader for importing SVG as optimized data URI with dimensions","directories":{},"_nodeVersion":"22.21.1","dependencies":{"svgo":"^4.0.0","image-size":"^2.0.2","mini-svg-data-uri":"^1.4.4"},"_hasShrinkwrap":false,"devDependencies":{"prettier":"^3.7.2","release-it":"^19.0.6","@types/node":"^18.15.0"},"_npmOperationalInternal":{"tmp":"tmp/turbopack-inline-svg-loader_1.0.2_1764422789467_0.6315968289820522","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"turbopack-inline-svg-loader","description":"A Turbopack loader for importing SVG as optimized data URI with dimensions","version":"1.0.3","type":"commonjs","repository":{"type":"git","url":"git+https://github.com/vitalets/turbopack-inline-svg-loader.git"},"main":"./src/index.js","scripts":{"prettier":"prettier --check --ignore-unknown --ignore-path=example/.gitignore .","prettier:w":"prettier --write --ignore-unknown --ignore-path=example/.gitignore .","deps":"npx npm-check-updates -i --format group,dep,repo --cooldown 7"},"dependencies":{"image-size":"^2.0.2","mini-svg-data-uri":"^1.4.4","svgo":"^4.0.1"},"devDependencies":{"@types/node":"^18.15.0","prettier":"^3.8.1","release-it":"^19.2.4"},"keywords":["turbopack","inline","svg","loader","dimensions"],"release-it":{"github":{"release":true},"npm":{"skipChecks":true},"git":{"commitArgs":"--no-verify","pushArgs":"--no-verify"}},"prettier":{"tabWidth":2,"useTabs":false,"singleQuote":true,"printWidth":100,"semi":true,"trailingComma":"all","bracketSpacing":true},"funding":"https://github.com/sponsors/vitalets","license":"MIT","gitHead":"64cdc8b3a254cde7df151401855803b38c43e1ff","_id":"turbopack-inline-svg-loader@1.0.3","bugs":{"url":"https://github.com/vitalets/turbopack-inline-svg-loader/issues"},"homepage":"https://github.com/vitalets/turbopack-inline-svg-loader#readme","_nodeVersion":"22.22.0","_npmVersion":"11.11.0","dist":{"integrity":"sha512-mW1DupAuwbJIg8n70Tr9ncXnEmF0mcNXzqmrUC9DtxeBNz8dqtUn1KoyfLRjvw0bBZEZnqG8QGCwpmvv4XOi4w==","shasum":"750646190b71516598bbc8d36230cc0b2420c617","tarball":"https://registry.npmjs.org/turbopack-inline-svg-loader/-/turbopack-inline-svg-loader-1.0.3.tgz","fileCount":4,"unpackedSize":9909,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/turbopack-inline-svg-loader@1.0.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCqAddDkPrjaYQ2nwkNGz/7olxE94y85bTZlbyRtylVFwIga4pbh9pEq7P8b5uwliNcrVAVrjFlFREw92IZbQe2ah0="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:b87609c0-ac39-48eb-a24a-58cd9578acbe"}},"directories":{},"maintainers":[{"name":"vitalets","email":"potapov.vitaliy@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/turbopack-inline-svg-loader_1.0.3_1772705566077_0.024036399139856668"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-13T18:19:05.596Z","modified":"2026-03-05T10:12:46.474Z","1.0.1":"2025-11-13T18:19:05.790Z","1.0.2":"2025-11-29T13:26:29.678Z","1.0.3":"2026-03-05T10:12:46.214Z"},"bugs":{"url":"https://github.com/vitalets/turbopack-inline-svg-loader/issues"},"license":"MIT","homepage":"https://github.com/vitalets/turbopack-inline-svg-loader#readme","keywords":["turbopack","inline","svg","loader","dimensions"],"repository":{"type":"git","url":"git+https://github.com/vitalets/turbopack-inline-svg-loader.git"},"description":"A Turbopack loader for importing SVG as optimized data URI with dimensions","maintainers":[{"name":"vitalets","email":"potapov.vitaliy@gmail.com"}],"readme":"# turbopack-inline-svg-loader\n\n[![npm version](https://img.shields.io/npm/v/turbopack-inline-svg-loader)](https://www.npmjs.com/package/turbopack-inline-svg-loader)\n[![license](https://img.shields.io/github/license/vitalets/turbopack-inline-svg-loader)](https://github.com/vitalets/turbopack-inline-svg-loader/blob/main/license)\n\nA [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack) loader for importing SVGs as optimized data URIs with dimensions. The imported object has the same shape as external image (`{ src, width, height }`) and can be passed directly to the Next.js `<Image />` component.\n\n## Example\n\nImport:\n\n```ts\nimport myIcon from './icon.svg';\n\n/*\nmyIcon is an object like:\n{\n  src: 'data:image/svg+xml,...',\n  width: 24,\n  height: 24,\n}\n*/\n```\n\nRender:\n\n```ts\nexport function MyIcon() {\n  return <Image src={myIcon} alt=\"my icon\" />;\n}\n```\n\nOutput:\n\n<img alt=\"Rendered HTML\" src=\"https://raw.githubusercontent.com/vitalets/turbopack-inline-svg-loader/refs/heads/main/rendered-html.png\">\n\n## Why inline SVG?\n\nInlining small SVGs is beneficial because it eliminates additional HTTP requests, resulting in faster page loads and instant rendering. The slight increase in JavaScript bundle size is usually outweighed by the overall performance gains.\n\n## Why not SVGR?\n\nCheck out [this article](https://kurtextrem.de/posts/svg-in-js).\n\n## Installation\n\nInstall via any package manager:\n\n```sh\n# NPM\nnpm i -D turbopack-inline-svg-loader\n\n# PNPM\npnpm add -D turbopack-inline-svg-loader\n\n# Yarn\nyarn add -D turbopack-inline-svg-loader\n```\n\n## Configuration\n\nAdd the loader configuration to `next.config.js`.\nSince **Next.js v16**, you can [conditionally](https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopack#advanced-webpack-loader-conditions) apply a loader only to SVGs smaller than a given size:\n\n```ts\nconst nextConfig = {\n  turbopack: {\n    rules: {\n      '*.svg': {\n        loaders: ['turbopack-inline-svg-loader'],\n        condition: {\n          content: /^[\\s\\S]{0,4000}$/, // <-- Inline SVGs smaller than ~4Kb (since Next.js v16)\n        },\n        as: '*.js',\n      },\n    },\n  },\n  // ...\n};\n```\n\n## Usage\n\nStatically import an SVG file and pass it to the `<Image/>` component:\n\n```tsx\nimport Image from 'next/image';\nimport myIcon from './icon.svg';\n\nexport default function Page() {\n  return <Image src={myIcon} alt=\"my icon\" />;\n}\n```\n\n### How to change size?\n\nYou can change the image size via the CSS `style` prop or `className`:\n\n```tsx\n// Set size via style\nreturn <Image src={myIcon} style={{ width: 64, height: 64 }} alt=\"my icon\" />;\n\n// Set size with Tailwind\nreturn <Image src={myIcon} className=\"size-64\" alt=\"my icon\" />;\n```\n\n### How to change color?\n\nFor monochrome icons, you can change the color using the [CSS mask technique](https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images). Set the background color and apply image as a mask:\n\n<img width=\"50%\" alt=\"CSS masking\" src=\"https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fshpd8mbat8bqfx1m26zu.png\"/>\n\nTo achieve this, render `<img>` tag with empty SVG and propper CSS styles:\n\n```jsx\n<img\n  src={EMPTY_SVG}\n  style={{\n    backgroundColor: `currentcolor`,\n    mask: `url(\"${src}\") no-repeat center / contain`,\n  }}\n/>\n```\n\nHere's a reusable universal `Icon.tsx` component, that renders icon with current or original color:\n\n````tsx\n/**\n * A component for rendering static icons in Next.js apps.\n *\n * Usage:\n * ```tsx\n * import myIcon from './myIcon.svg';\n *\n * // Render with current text color\n * <Icon src={myIcon} width={32} height={32} />\n *\n * // Render with original icon colors\n * <Icon src={myIcon} nofill width={32} height={32} />\n * ```\n */\nimport { type ComponentProps } from 'react';\nimport { type StaticImageData } from 'next/image';\n\ntype IconProps = Omit<ComponentProps<'img'>, 'src'> & {\n  /* Icon path and dimensions */\n  src: StaticImageData;\n  /* Disables filling with the current color and renders the original icon colors */\n  nofill?: boolean;\n};\n\nconst EMPTY_SVG = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E`;\n\nexport default function Icon({ src, nofill, width, height, alt, style, ...props }: IconProps) {\n  const mainSrc = nofill ? src.src : EMPTY_SVG;\n  width ??= src.width;\n  height ??= src.height;\n  alt ??= 'icon';\n  style = nofill\n    ? style\n    : {\n        ...style,\n        backgroundColor: `currentcolor`,\n        mask: `url(\"${src.src}\") no-repeat center / contain`,\n      };\n\n  return <img src={mainSrc} width={width} height={height} alt={alt} style={style} {...props} />;\n}\n````\n\n> You can copy & paste this component to your project as is.\n\nNow you can render colored icons:\n\n```tsx\nimport Icon from './Icon';\nimport myIcon from './icon.svg';\n\n// Set color with style\nreturn <Icon src={myIcon} style={{ color: 'green' }} />;\n\n// Set color with Tailwind\nreturn <Icon src={myIcon} className=\"text-green-600\" />;\n\n// Or keep original colors with `nofill` prop\nreturn <Icon nofill src={myIcon} />;\n```\n\n## TypeScript\n\nBy default, Next.js imports `*.svg` assets [as the `any` type](https://github.com/vercel/next.js/blob/v16.0.3/packages/next/image-types/global.d.ts#L16) to avoid conflicts with SVGR. To make `*.svg` imports behave like other images (`{ src, width, height }`), create the following `svg.d.ts` file in the project root:\n\n```ts\ndeclare module '*.svg' {\n  const content: import('next/image').StaticImageData;\n  export default content;\n}\n```\n\nand add it to `tsconfig.json` before `next-env.d.ts`:\n\n```diff\n\"include\": [\n+ \"svg.d.ts\",\n  \"next-env.d.ts\",\n  ...\n],\n```\n\nNow your SVG imports will be resolved as `{ src, width, height }`.\n\n## References\n\nA short background article [How I arrived at this package](https://dev.to/vitalets/turbopack-a-better-way-to-inline-svg-in-nextjs-16-36em).\n\nSome other resources to dive deep into the rabbit hole of SVGs:\n\n- [A guide to using SVGs in React](https://blog.logrocket.com/guide-svgs-react)\n- [Breaking Up with SVG-in-JS](https://kurtextrem.de/posts/svg-in-js)\n- [Introducing @svg-use](https://fotis.xyz/posts/introducing-svg-use/)\n\n## Feedback\n\nFeel free to share your feedback and suggestions in the [issues](https://github.com/vitalets/turbopack-inline-svg-loader/issues).\n\n## License\n\n[MIT](https://github.com/vitalets/turbopack-inline-svg-loader/blob/main/LICENSE)\n","readmeFilename":"README.md"}