Skip to content
@staticbolt/core

HTML Inline SVG Plugin

A plugin for staticbolt that inlines external SVG files into the HTML. The file can be a local one or a remote URL.

Installation

The plugin ships as part of @staticbolt/core. You do not need to install another package.

Usage

In your .staticbolt.ts configuration file:

import { defineConfig } from "@staticbolt/core";
import { htmlInlineSvgPlugin } from "@staticbolt/core/plugins";


export default defineConfig({
  plugins: [htmlInlineSvgPlugin()],
});

Inlining an SVG

Add a <svg> tag with the inline attribute and a src attribute that points to the SVG file. The plugin replaces the tag with the content of that file.

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

Every attribute on the placeholder <svg> tag apart from src and inline is forwarded to the root element of the inlined SVG. You can set class, width, height, or aria-label on the placeholder itself.

<svg src="./icons/logo.svg" inline class="icon" width="24" height="24" aria-label="Logo"></svg>

Using a remote URL

The src attribute can also point to a remote URL. The plugin downloads the SVG at build time and inlines its content.

<svg src="https://example.com/icon.svg" inline></svg>

Options

inlineAttribute

  • Type: string
  • Default: "inline"

The attribute name that marks an <svg> tag for inlining.

htmlInlineSvgPlugin({
  inlineAttribute: "embed",
});