{"id":28566448,"url":"https://github.com/js-devtools/rehype-inline-svg","last_synced_at":"2025-06-10T15:10:59.928Z","repository":{"id":55401183,"uuid":"192899310","full_name":"JS-DevTools/rehype-inline-svg","owner":"JS-DevTools","description":"A rehype plugin that inlines and optimizes SVG images","archived":false,"fork":false,"pushed_at":"2024-05-16T14:59:18.000Z","size":312,"stargazers_count":9,"open_issues_count":2,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-25T21:17:55.804Z","etag":null,"topics":["html","html5","images","inline","javascript","nodejs","optimizer","rehype","rehype-plugin","svg","unified"],"latest_commit_sha":null,"homepage":"https://jstools.dev/rehype-inline-svg/","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/JS-DevTools.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-20T10:23:15.000Z","updated_at":"2025-03-14T05:38:43.000Z","dependencies_parsed_at":"2022-08-14T23:30:44.566Z","dependency_job_id":null,"html_url":"https://github.com/JS-DevTools/rehype-inline-svg","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":"JS-DevTools/template-node-typescript","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JS-DevTools%2Frehype-inline-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JS-DevTools%2Frehype-inline-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JS-DevTools%2Frehype-inline-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JS-DevTools%2Frehype-inline-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JS-DevTools","download_url":"https://codeload.github.com/JS-DevTools/rehype-inline-svg/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JS-DevTools%2Frehype-inline-svg/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259098639,"owners_count":22804794,"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":["html","html5","images","inline","javascript","nodejs","optimizer","rehype","rehype-plugin","svg","unified"],"created_at":"2025-06-10T15:10:59.224Z","updated_at":"2025-06-10T15:10:59.907Z","avatar_url":"https://github.com/JS-DevTools.png","language":"TypeScript","readme":"# Inline SVG plugin for rehype\nA [rehype](https://github.com/rehypejs/rehype) plugin that inlines and optimizes SVG images\n\n[![Cross-Platform Compatibility](https://jstools.dev/img/badges/os-badges.svg)](https://github.com/JS-DevTools/rehype-inline-svg/actions)\n[![Build Status](https://github.com/JS-DevTools/rehype-inline-svg/workflows/CI-CD/badge.svg)](https://github.com/JS-DevTools/rehype-inline-svg/actions)\n\n[![Coverage Status](https://coveralls.io/repos/github/JS-DevTools/rehype-inline-svg/badge.svg?branch=master)](https://coveralls.io/github/JS-DevTools/rehype-inline-svg)\n[![Dependencies](https://david-dm.org/JS-DevTools/rehype-inline-svg.svg)](https://david-dm.org/JS-DevTools/rehype-inline-svg)\n\n[![npm](https://img.shields.io/npm/v/@jsdevtools/rehype-inline-svg.svg)](https://www.npmjs.com/package/@jsdevtools/rehype-inline-svg)\n[![License](https://img.shields.io/npm/l/@jsdevtools/rehype-inline-svg.svg)](LICENSE)\n[![Buy us a tree](https://img.shields.io/badge/Treeware-%F0%9F%8C%B3-lightgreen)](https://plant.treeware.earth/JS-DevTools/rehype-inline-svg)\n\n\n\nFeatures\n--------------------------\n- Replaces SVG `\u003cimg\u003e` tags with inlined `\u003csvg\u003e` tags\n  - Reduces extra HTTP requests to fetch tiny SVG files\n  - Gives you [fine-grained control of images using CSS](https://css-tricks.com/using-svg/#article-header-id-7)\n- Optimizes SVGs using [svgo](https://github.com/svg/svgo#readme)\n  - Minimizes download size\n  - Removes extra metadata that is added by image editors\n- Caches file reads\n  - Each `.svg` file is only read from disk _once_ and optimized _once_\n  - Improves processing speed when images occur multiple times on a page\n  - Improves processing speed when processing multiple HTML pages\n\n\n\nExample\n--------------------------\nThis example uses [to-vfile](https://github.com/vfile/to-vfile) to read an HTML file and process it using [unified](https://unifiedjs.com/), [rehype-parse](https://github.com/rehypejs/rehype/tree/master/packages/rehype-parse), and [rehype-stringify](https://github.com/rehypejs/rehype/tree/master/packages/rehype-stringify).\n\n**index.html**\n\n```html\n\u003chtml\u003e\n  \u003cbody\u003e\n    \u003cimg src=\"img/icon.svg\" alt=\"some icon\"\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n**example.js**\n\n```javascript\nconst unified = require(\"unified\");\nconst parse = require(\"rehype-parse\");\nconst inlineSVG = require(\"@jsdevtools/rehype-inline-svg\");\nconst stringify = require(\"rehype-stringify\");\nconst vfile = require(\"to-vfile\");\n\nasync function example() {\n  // Create a Rehype processor with the Inline SVG plugin\n  const processor = unified()\n    .use(parse)\n    .use(inlineSVG)\n    .use(stringify);\n\n  // Read an HTML file that contains SVG images\n  let originalFile = await vfile.read(\"index.html\");\n\n  // Process the file, inlining and optimizing SVG images\n  let modifiedFile = await processor.process(originalFile);\n\n  // The result is HTML with inlined \u003csvg\u003e elements\n  console.log(modifiedFile.contents);\n\n  // \u003chtml\u003e\n  //   \u003cbody\u003e\n  //     \u003csvg alt=\"some icon\" viewBox=\"0 0 48 48\"\u003e\u003cpath d=\"M5 24c0...\n  //   \u003c/body\u003e\n  // \u003c/html\u003e\n}\n```\n\n\n\nInstallation\n--------------------------\nYou can install Rehype Inline SVG via [npm](https://docs.npmjs.com/about-npm/).\n\n```bash\nnpm install @jsdevtools/rehype-inline-svg\n```\n\nYou'll probably want to install [unified](https://unifiedjs.com/), [rehype-parse](https://github.com/rehypejs/rehype/tree/master/packages/rehype-parse), [rehype-stringify](https://github.com/rehypejs/rehype/tree/master/packages/rehype-stringify), and [to-vfile](https://github.com/vfile/to-vfile) as well.\n\n```bash\nnpm install unified rehype-parse rehype-stringify to-vfile\n```\n\n\n\nUsage\n--------------------------\nUsing the Inline SVG plugin requires an understanding of how to use Unified and Rehype. [Here is an excelleng guide](https://unifiedjs.com/using-unified.html) to learn the basics.\n\nThe Inline SVG plugin works just like any other Rehype plugin. Pass it to [the `.use()` method](https://github.com/unifiedjs/unified#processoruseplugin-options), optionally with an [options object](#options).\n\n```javascript\nconst unified = require(\"unified\");\nconst inlineSVG = require(\"@jsdevtools/rehype-inline-svg\");\n\n// Use the Inline SVG plugin with its default options\nunified().use(inlineSVG);\n\n// Use the Inline SVG plugin with custom options\nunified().use(inlineSVG, {\n  maxImageSize: 5000,          // Don't inline SVGs larger than 5 kb\n  maxTotalSize: 25000,    // 25 kb limit for all occurrences of each SVG\n  optimize: false,            // Don't optimize SVGs\n});\n```\n\n\n\nOptions\n--------------------------\nRehype Inline SVG supports the following options:\n\n|Option            |Type                 |Default     |Description\n|:-----------------|:--------------------|:-----------|:-----------------------------------------\n|`maxImageSize`    |`number`             |`3000`      |The maximum image size (in bytes) to inline. Images that are larger than this (after optimization) will not be inlined.\u003cbr\u003e\u003cbr\u003eDefaults to ~3 kilobytes.\n|`maxOccurrences`  |`number`             |`Infinity`  |The maximum number of times that the same image can appear on a page and still be inlined. Images that occur more than this number of times will not be inlined.\n|`maxTotalSize`    |`number`             |`10000`     |The maximum total size (in bytes) of all occurrences of a single image. If `maxTotalSize` is 10kb and a 2kb image occurs 5 times on a page, then all five occurrences will be inlined. But if the image accurs 6 or more times, then none of them will be inlined.\u003cbr\u003e\u003cbr\u003eDefaults to ~10 kilobytes.\n|`optimize`        |`boolean` or `object`|`true`      |[SVG optimization options](https://github.com/svg/svgo). If `false`, then SVGs will not be optimized. If `true`, then the default optimization options will be used.\n\n\n\nContributing\n--------------------------\nContributions, enhancements, and bug-fixes are welcome!  [Open an issue](https://github.com/JS-DevTools/rehype-inline-svg/issues) on GitHub and [submit a pull request](https://github.com/JS-DevTools/rehype-inline-svg/pulls).\n\n#### Building\nTo build the project locally on your computer:\n\n1. __Clone this repo__\u003cbr\u003e\n`git clone https://github.com/JS-DevTools/rehype-inline-svg.git`\n\n2. __Install dependencies__\u003cbr\u003e\n`npm install`\n\n3. __Build the code__\u003cbr\u003e\n`npm run build`\n\n4. __Run the tests__\u003cbr\u003e\n`npm test`\n\n\n\nLicense\n--------------------------\nRehype Inline SVG is 100% free and open-source, under the [MIT license](LICENSE). Use it however you want.\n\nThis package is [Treeware](http://treeware.earth). If you use it in production, then we ask that you [**buy the world a tree**](https://plant.treeware.earth/JS-DevTools/rehype-inline-svg) to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.\n\n\n\nBig Thanks To\n--------------------------\nThanks to these awesome companies for their support of Open Source developers ❤\n\n[![GitHub](https://jstools.dev/img/badges/github.svg)](https://github.com/open-source)\n[![NPM](https://jstools.dev/img/badges/npm.svg)](https://www.npmjs.com/)\n[![Coveralls](https://jstools.dev/img/badges/coveralls.svg)](https://coveralls.io)\n[![Travis CI](https://jstools.dev/img/badges/travis-ci.svg)](https://travis-ci.com)\n[![SauceLabs](https://jstools.dev/img/badges/sauce-labs.svg)](https://saucelabs.com)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs-devtools%2Frehype-inline-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjs-devtools%2Frehype-inline-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs-devtools%2Frehype-inline-svg/lists"}