SVGs

Setup

The SVG plugin is included in manifest.js with all core plugins, or can be selectively loaded.

<script src="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.js"
    data-plugins="svg"></script>

Use x-svg to load a local SVG file's <svg> element within it. Fetched files are cached in memory for the page session, similar to the markdown plugin.

File Content

Pass a path to an .svg file in the project directory, wrapped in apostrophes.

<div class="size-10" x-svg="'/assets/examples/icon-star.svg'"></div>

Inline Content

The SVG tag itself can be applied within apostrophes, using " for its internal double quotes. However this is redundant when the SVG is easier placed directly as inline HTML.

<div class="size-10" x-svg="'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.91 6.41L22 9.27l-5 4.87L18.18 22 12 18.77 5.82 22 7 14.14 2 9.27l7.09-.86z"/></svg>'"></div>

Dynamic Content

Alpine expressions can supply the SVG string or path at runtime (including template literals), same as dynamic markdown.

<div class="size-10" x-data="{ star: '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'currentColor\'><path d=\'M12 2l2.91 6.41L22 9.27l-5 4.87L18.18 22 12 18.77 5.82 22 7 14.14 2 9.27l7.09-.86z\'/></svg>' }">
    <span class="block size-full" x-svg="star"></span>
</div>

From Data Sources

The SVG file's path can also be populated from a data source.

<span class="size-10" x-svg="$x.example.sampleSvg"></span>

{
    "sampleSvg": "/assets/examples/icon-star.svg"
}

Styles

Modify an SVG's appearance either within the SVG file itself, or using CSS on the host or an ancestor. Removing fixed width and height on the root <svg> (keeping viewBox) lets utilities or layout on the parent control size. Use fill="currentColor" or stroke="currentColor" so color on the wrapper flows into the graphic.

<div class="size-12 text-brand-content parent" x-svg="'/assets/examples/icon-star.svg'"></div>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 2l2.91 6.41L22 9.27l-5 4.87L18.18 22 12 18.77 5.82 22 7 14.14 2 9.27l7.09-.86z"></path>
</svg>

.parent svg {
    width: 100%;
    height: 100%;
    background: var(--color-brand-surface)
}