SvgImage

Defined in: vanilla-integration/src/SvgImage.ts:52

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" });

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

SVG source code

Param

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

Extended by

• SvgIcon

Constructors

Constructor

new SvgImage(src, mountTo?): SvgImage

Defined in: vanilla-integration/src/SvgImage.ts:77

Parameters

src

string

mountTo?

ElementOrSelector

Returns

SvgImage

Methods

getContainer()

getContainer(): undefined | Element

Defined in: vanilla-integration/src/SvgImage.ts:207

Returns

undefined | Element

A container of this image, or undefined, if image is not mounted

---

getSrc()

getSrc(): undefined | string

Defined in: vanilla-integration/src/SvgImage.ts:200

Returns

undefined | string

SVG source code

---

getSvgEl()

getSvgEl(): SVGElement

Defined in: vanilla-integration/src/SvgImage.ts:218

Returns <svg> element.

To assign attributes, use setSvgElAttrs instead.

Returns

SVGElement

<svg> element

---

getUseEl()

getUseEl(): SVGUseElement

Defined in: vanilla-integration/src/SvgImage.ts:229

Returns <use> element.

To assign attributes, use setSvgElAttrs instead.

Returns

SVGUseElement

<use> element

---

mount()

mount(to): SvgImage

Defined in: vanilla-integration/src/SvgImage.ts:94

Mounts image to the given element

Parameters

to

ElementOrSelector

Element or selector of an element to mount image to

Returns

SvgImage

this

---

setSrc()

setSrc(src): SvgImage

Defined in: vanilla-integration/src/SvgImage.ts:189

Sets SVG source code

Parameters

src

string

SVG source code

Returns

SvgImage

this

---

setSvgElAttrs()

setSvgElAttrs(attrs): SvgImage

Defined in: vanilla-integration/src/SvgImage.ts:115

Sets <svg> element attributes. It won’t remove id, class and style.

Parameters

attrs

Record<string, any>

Attributes to set

Returns

SvgImage

this

---

setUseElAttrs()

setUseElAttrs(attrs): SvgImage

Defined in: vanilla-integration/src/SvgImage.ts:152

Sets <use> element attributes. It won’t remove id, class and style.

Parameters

attrs

Record<string, any>

Attributes to set

Returns

SvgImage

this

---

unmount()

unmount(): SvgImage

Defined in: vanilla-integration/src/SvgImage.ts:103

Removes image from the container

Returns

SvgImage

this