pluginSvg

A plugin that embeds SVG files referenced by root paths inline in HTML.

  • Optimizes code with SVGO when embedding

See the guide for setup and examples. This page covers settings, component props, and constraints.

Table of Contents

Options

Defaults
pluginSvg({})

config

  • Type: Config
  • Default: undefined

Pass a svgo Config to customize optimization.

Svg

A component that reads an SVG file from a root path and expands it into an <svg> tag.

  • Optimizes code with SVGO when embedding
type SvgProps = {
  src: string
  className?: string
  title?: string
  attributes?: React.SVGProps<SVGSVGElement>
} & React.SVGProps<SVGSVGElement>

Diagnostics

If SVG embedding fails, the build emits the following diagnostic codes.

  • MINISTA_SVG_READ_FAILED: SVG file reading failed
  • MINISTA_SVG_OPTIMIZE_FAILED: SVGO optimization failed
  • MINISTA_SVG_PARSE_FAILED: SVG markup parsing failed

A missing source file produces MINISTA_SVG_SOURCE_NOT_FOUND and fails the build. Diagnostics include the SVG's path relative to the project. Failures in HTML parsing, selectors, mutation, or serialization produce the corresponding MINISTA_HTML_*_FAILED code.

Attributes and dev updates

The optimized root retains viewBox, preserveAspectRatio, dimensions, drawing attributes such as fill and stroke, and style and class. Explicit props of the same name on Svg take priority; style and className also replace their respective attributes. The source SVG's root id, event attributes, and arbitrary attributes such as data-* are not copied. If neither explicit props nor the source has a viewBox, 0 0 0 0 is used.

During development, additions, changes, and deletions of referenced files trigger reloads of referencing pages. Source files are read again on rebuild as well.

SVG internal IDs

Internal IDs and references for gradients, clipPath, and similar elements receive deterministic prefixes to avoid collisions. Multiple instances of the same SVG are supported. Do not reference original internal IDs from external CSS or JavaScript. Class names are preserved.