Inline CSS, JavaScript, SVG, and images in the HTML.


This plugin allows you to inline some sources, like CSS, images, or JavaScript, in the HTML automatically. Any HTML tag with the inline attribute will be included in the HTML. For example:

<link rel="stylesheet" href="/css/my-styles.css" inline>

<script src="/js/my-scripts.js" inline></script>

<img src="/img/avatar.png" inline>

<img src="/img/logo.svg" inline>

The source file must be exported to the dest directory; there's no support for external URLs.


Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import inline from "lume/plugins/inline.ts";

const site = lume();


export default site;

See all available options in Deno Doc.

SVG inline

Bitmap images (like .png or .jpeg) are inlined as base64 data but SVG images are replaced by the <svg> element. The new <svg> elements will keep the same class and id attributes as the replaced <img>.

For example, this image:

<img src="icon.svg" class="icon" id="icon-1" inline>

Will become:

<svg width="180px" height="180px" xmlns="" class="icon" id="icon-1">

By default, some attributes like id or class are copied from the original img to the new svg element. You can configure the plugin to copy more attributes using an array of strings or regular expressions:

  copyAttributes: ["title", /^data-/], // Copy the "title" and all data-* attributes