Documentation v0.6.19
Home GitHub

SVG Inlining

This page covers how <temp-svg> swaps an external SVG file for an inline <svg> element, so CSS can style it.

Syntax

<temp-svg :src="icon" class="icon" @click="close"></temp-svg>
<temp-svg src="/icons/menu.svg"></temp-svg>

<script>
  const app = new QUI({
    id: "app",
    data: { icon: "/icons/close.svg" },
    event: { close: () => {} },
  });
</script>
Stage Behavior
Render <temp-svg :src> sets src and hands the element to an IntersectionObserver
Enters the viewport The SVG text is fetched and its first child element is parsed
Replacement The new <svg> takes the original element's id, every class and onclick, is inserted in its place, and <temp-svg> is removed
Failure The content of <temp-svg> becomes ☒

<temp-svg> elements already on the page with a static src are processed too when the listener is created.

Rules

Rule Description
Carried over Only id, classes and onclick; other attributes and events are not transferred
File content Only the first element in the response is used and it must be <svg>; sibling elements after it are discarded
Cross-origin Requires CORS headers

Disabling

new QUI({ id: "app", option: { svg: false } });

With it disabled, no listener is created; using <temp-svg :src> in the template then throws because the observer does not exist.

中文