Class SvgImage

Basic SVG image. Implements SVG sprites.

Will create <svg> element that contains all symbols, add passed source code to it and reuse it later.

Basic usage

import imageSrc from "./path/to/image.svg";
import anotherImageSrc from "./path/to/another/image.svg";
import { SvgImage } from "vite-awesome-svg-loader/vanilla-integration";

const container = document.createElement("div"); // Where to mount SVG
const image = new SvgImage(imageSrc, container); // Create image and mount it to the container
image.setSvgElAttrs({ id: "my-svg-symbol" }); // Change <svg> element attributes
image.setUseElAttrs({ className: "my-svg-symbol-use-el" }); // Change <use> element attributes
image.setSrc(anotherImageSrc); // Change SVG source code
console.log(image.getSrc()); // Get and print image source code
console.log(image.getContainer()); // Get and print image container
console.log(image.getSvgEl()); // Get and print image <svg> element
console.log(image.getUseEl()); // Get and print image <use> element
image.unmount(); // Remove image from the container

// All operations are chainable, so you can do this:

const image2 = new SvgImage(imageSrc)
  .mount(container)
  .setSvgElAttrs({ id: "my-svg-symbol" })
  .setUseElAttrs({ className: "my-svg-symbol-use-el" });
Copy

Internal API

You can use this API to extend SvgImage.

Use constructor() and SvgImage#mount to change component markup.

Use SvgImage._updateSvgBeforeUserAttrsSet, SvgImage._updateSvgAfterUserAttrsSet, SvgImage._updateUseElBeforeUserAttrsSet, SvgImage._updateUseElAfterUserAttrsSet hooks to set custom elements attributes.

You probably don't need to override required element's attributes. If you actually need to do so, override SvgImage._updateSvgEl

Param: src

SVG source code

Param: mountTo

Element or selector of an element to mount image to. If not provided, image won't be mounted.