remark-inline-svg-flex 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 gass-git
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,124 @@
+> 🚧 **Work in progress** This plugin is still under active development. Expect changes.
+
+# remark-inline-svg-flex
+
+[![Downloads](https://img.shields.io/npm/dm/remark-inline-svg-flex.svg?style=flat-square)](https://www.npmjs.com/package/remark-inline-svg-flex)
+[![version](https://img.shields.io/npm/v/remark-inline-svg-flex.svg?style=flat-square)](https://www.npmjs.com/package/remark-inline-svg-flex)
+[![MIT License](https://img.shields.io/npm/l/remark-inline-svg-flex.svg?style=flat-square)](https://github.com/gass-git/remark-inline-svg-flex/blob/main/LICENSE)
+
+Flexible Remark plugin that inlines and optimizes SVGs with SVGO, featuring customizable path resolution, wrappers and others.
+
+- [remark-inline-svg-flex](#remark-inline-svg-flex)
+  - [Features](#features)
+  - [Installation](#installation)
+  - [Usage](#usage)
+  - [Options](#options)
+    - [`suffix`](#suffix)
+    - [`assetsDir`](#assetsdir)
+    - [`wrapper`](#wrapper)
+    - [`svgo`](#svgo)
+  - [SVGO configuration](#svgo-configuration)
+
+## Features
+
+### ✔️ Robust and customizable path resolution
+
+- If the SVG path is absolute, it is used as-is.
+- If the path is relative and assetsDir is defined, it is resolved relative to that directory.
+- Otherwise, the path is resolved relative to the Markdown file’s location.
+
+### ✔️ Custom HTML wrapper support
+
+Use your own custom HTML wrapper, no wrapper at all, or the default:
+
+```
+<figure class="inline-svg"></figure>
+```
+
+### ✔️ Optional SVG optimization
+
+SVG optimization can be disabled if needed e.g. if SVGO removes required attributes.
+
+### ✔️ Configurable suffix
+
+By default, only files ending in `.svg` are processed. You can customize the suffix to suit your needs.
+
+## Installation
+
+```
+npm i remark-inline-svg-flex
+```
+
+## Usage
+
+Say we have the following file `example.md`:
+
+```markdown
+# Hello
+
+This is a test markdown document.
+
+![some svg](some.svg)
+```
+
+And our module `example.js` looks as follows:
+
+```js
+import { remark } from 'remark';
+import { readFile } from 'node:fs/promises';
+import { inlineSvg } from 'remark-inline-svg-flex';
+
+const markdown = await readFile(_path, { encoding: 'utf8' });
+
+return await remark().use(remarkParse).use(inlineSvg).process(markdown);
+```
+
+Now running `node example.js` yields:
+
+```markdown
+# Hello
+
+This is a test markdown document.
+
+<figure class="inline-svg">
+  <svg fill="none" viewBox="0 0 250 250" role="img" aria-hidden="true"><circle cx="125" cy="125" r="100" fill="#BA5B5B"/></svg>
+</figure>
+```
+
+## Options
+
+| Key                       | type                  | Default value                            | Description                                                |
+| ------------------------- | --------------------- | ---------------------------------------- | ---------------------------------------------------------- |
+| [`suffix`](#suffix)       | `string`              | `'.svg'`                                 | The plugin only processes SVG files ending with this value |
+| [`assetsDir`](#assetsdir) | `string \| undefined` | `undefined`                              | Base directory where SVG files are located                 |
+| [`wrapper`](#wrapper)     | `string`              | `'<figure class="inline-svg"></figure>'` | HTML wrapper used to wrap the inlined SVG                  |
+| [`svgo`](#svgo)           | `boolean`             | `true`                                   | Enable or disable SVG optimization                         |
+
+### `suffix`
+
+Only image nodes whose URL ends with the specified suffix will be processed. Defaults to `'.svg'`.
+
+### `assetsDir`
+
+Base directory where SVG files are located. By default is `undefined` and it will resolve paths either in an absolute or relative manner.
+
+### `wrapper`
+
+Defines the HTML wrapper used around the inlined SVG.
+
+- Set to an empty string `''` to disable wrapping entirely.
+- Defaults to:
+
+```
+<figure class="inline-svg"></figure>
+```
+
+### `svgo`
+
+The SVG's are optimized by default. Disable it by setting it to `false`.
+
+## SVGO configuration
+
+```
+{ plugins: ['preset-default', 'removeXMLNS', 'removeDimensions'] }
+```

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './plugin';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './plugin';

package/dist/plugin.d.ts

@@ -0,0 +1,14 @@
+import type { Plugin } from 'unified';
+import type { Root } from 'mdast';
+import type { Options } from './types';
+/**
+ * Transforms image nodes that match the given suffix (default: .svg) into inline SVG.
+ *
+ * @param options - Plugin configuration
+ * @param options.suffix - File extension to match (default: '.svg')
+ * @param options.assetsDir - Optional base directory for resolving SVG paths (default: undefined)
+ * @param options.wrapper - Optional HTML wrapper for the inline SVG (default: `<figure class="inline-svg"></figure>`)
+ * @param options.svgo - Whether to optimize SVG using SVGO (default: true)
+ */
+declare const inlineSvg: Plugin<[Options?], Root, Root>;
+export { inlineSvg };

package/dist/plugin.js

@@ -0,0 +1,82 @@
+import path from 'node:path';
+import fs from 'node:fs';
+import { visit } from 'unist-util-visit';
+import { VFile } from 'vfile';
+import { optimize } from 'svgo';
+/**
+ * Transforms image nodes that match the given suffix (default: .svg) into inline SVG.
+ *
+ * @param options - Plugin configuration
+ * @param options.suffix - File extension to match (default: '.svg')
+ * @param options.assetsDir - Optional base directory for resolving SVG paths (default: undefined)
+ * @param options.wrapper - Optional HTML wrapper for the inline SVG (default: `<figure class="inline-svg"></figure>`)
+ * @param options.svgo - Whether to optimize SVG using SVGO (default: true)
+ */
+const inlineSvg = (consumerOptions = {}) => {
+    const options = {
+        suffix: consumerOptions.suffix ?? '.svg',
+        assetsDir: consumerOptions.assetsDir,
+        wrapper: consumerOptions.wrapper ?? '<figure class="inline-svg"></figure>',
+        svgo: consumerOptions.svgo ?? true,
+    };
+    return function transformer(tree, file) {
+        visit(tree, 'image', (node, i, parent) => {
+            if (!node.url?.endsWith(options.suffix) || !parent)
+                return;
+            try {
+                const svgPath = resolvePath(options.assetsDir, node, path.dirname(file.history[0]));
+                const svgString = processSvg(svgPath, options.svgo);
+                parent.children[i] = {
+                    type: 'html',
+                    value: options.wrapper ? wrap(svgString, options.wrapper) : svgString,
+                };
+            }
+            catch (error) {
+                console.warn(error);
+            }
+        });
+    };
+};
+/**
+ * Reads an SVG file and optionally optimizes it with SVGO.
+ */
+function processSvg(path, svgo) {
+    const svgString = fs.readFileSync(path, 'utf8');
+    return svgo ? optimizeSvg(svgString).data : svgString;
+}
+/**
+ * Injects SVG markup into an HTML wrapper before its closing tag.
+ */
+function wrap(svgString, htmlWrapper) {
+    const i = htmlWrapper.lastIndexOf('</');
+    if (i === -1) {
+        throw new Error(`Invalid HTML wrapper`);
+    }
+    return htmlWrapper.slice(0, i) + svgString + htmlWrapper.slice(i);
+}
+/**
+ * Resolves the final SVG file path based on:
+ * 1) absolute URL → from project root
+ * 2) `assetsDir` → relative to it
+ * 3) fallback → relative to Markdown file directory
+ */
+function resolvePath(assetsDir, node, markdownFileDir) {
+    if (path.isAbsolute(node.url)) {
+        return path.resolve(process.cwd(), node.url);
+    }
+    else if (assetsDir) {
+        return path.resolve(process.cwd(), assetsDir, node.url);
+    }
+    else {
+        return path.resolve(markdownFileDir, node.url);
+    }
+}
+/**
+ * Optimizes SVG content using predefined SVGO plugins.
+ */
+function optimizeSvg(svgString) {
+    return optimize(svgString, {
+        plugins: ['preset-default', 'removeXMLNS', 'removeDimensions'],
+    });
+}
+export { inlineSvg };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "remark-inline-svg-flex",
+  "version": "0.1.1",
+  "description": "Flexible Remark plugin that inlines and optimizes SVGs with SVGO, featuring customizable path resolution and wrappers.",
+  "keywords": [
+    "unified",
+    "rehype",
+    "plugin",
+    "rehype-plugin",
+    "inline",
+    "svg",
+    "image",
+    "img",
+    "html"
+  ],
+  "homepage": "https://github.com/gass-git/remark-inline-svg-flex#readme",
+  "bugs": {
+    "url": "https://github.com/gass-git/remark-inline-svg-flex/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gass-git/remark-inline-svg-flex.git"
+  },
+  "license": "MIT",
+  "author": "gass-git",
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "build": "tsc",
+    "dev": "rimraf --glob \"*.tgz\" && npm run build && npm pack && npm link",
+    "tests": "vitest"
+  },
+  "devDependencies": {
+    "@types/mdast": "^4.0.4",
+    "@types/node": "^25.5.0",
+    "prettier": "^3.8.1",
+    "remark": "^15.0.1",
+    "remark-parse": "^11.0.0",
+    "svgo": "^4.0.1",
+    "typescript": "^5.9.3",
+    "unified": "^11.0.5",
+    "vfile": "^6.0.3",
+    "vitest": "^4.1.0"
+  },
+  "dependencies": {
+    "unist-util-visit": "^5.1.0"
+  }
+}