SvgImage

Defined in: web-components-integration/src/SvgImage.ts:58

Basic SVG image. Implements SVG sprites. Adds <svg> element with the symbols to the <body>.

Pass SVG source code to the src property, so the image will be rendered.

Every attribute that starts with svg- string will be passed down to the <svg> element.

Every attribute that starts with use- string will be passed down to the <use> element.

Example

// Import SVG source code:
import imgSrc from "@/assets/image.svg?src";

// Import web component:
import { SvgImage } from "vite-awesome-svg-loader/web-components-integration";

// Define a custom element:
SvgImage.define();

// Create image:
const img = new SvgImage();
// or:
const img = document.createElement("svg-image");

// Assign SVG source code to the image:
img.src = imgSrc;

// Add image to the DOM:
document.body.appendChild(img);

// Set attributes to <svg> element:
img.setAttribute("svg-preserveAspectRatio", "xMaxYMin"); // Will set preserveAspectRatio="xMaxYMin"

// Set attributes to <use> element:
img.setAttribute("use-data-test", "use-el"); // will set data-test="use-el"

Extends

WebComponent

Implements

CustomElement

Constructors

Constructor

new SvgImage(): SvgImage

Defined in: web-components-integration/src/SvgImage.ts:90

Returns

SvgImage

Overrides

WebComponent.constructor

Properties

src

src: string

Defined in: web-components-integration/src/SvgImage.ts:66

SVG source code

_state

protected _state: WebComponentState = "uninitialized"

Defined in: web-components-integration/src/WebComponent.ts:284

Current component state. See WebComponentState for the details.

Inherited from

WebComponent._state

_updateSrcRes

protected _updateSrcRes: { attrs?: undefined; id?: undefined; } | { attrs: { height: string; viewBox: string; width: string; }; id: string; } | { attrs?: undefined; id: string; } = {}

Defined in: web-components-integration/src/SvgImage.ts:71

Last src update result

observedAttributes?

static optional observedAttributes: string[]

Defined in: web-components-integration/src/WebComponent.ts:270

Doesn’t do anything. All attributes are already observed. This property will be deleted when custom element will be defined.

This property is recognized for compatibility reasons only.

Inherited from

WebComponent.observedAttributes

props

readonly static props: object[]

Defined in: web-components-integration/src/SvgImage.ts:59

Properties that will be synced with attributes.

Properties must be in camelCase. Synchronized attributes will be in kebab-case.

To not confuse cases, prefer single-word names.

default

default: string = EMPTY_SVG

name

name: string = "src"

Overrides

WebComponent.props

Accessors

svgEl

Get Signature

get svgEl(): SVGElement

Defined in: web-components-integration/src/SvgImage.ts:86

<svg> element

Returns

SVGElement

useEl

Get Signature

get useEl(): SVGUseElement

Defined in: web-components-integration/src/SvgImage.ts:79

<use> element

Returns

SVGUseElement

Methods

attributeChangedCallback()

attributeChangedCallback(name, oldValue, newValue): void

Defined in: web-components-integration/src/SvgImage.ts:110

Called when:

Component has just finished initialization. Then:
1. _state property will be attrs-first-change.
2. oldValue argument will be null.
3. newValue will have a default value or null, if there’s no default.
4. Thus, following may be true: oldValue === newValue && newValue === null.
Any of the element’s attributes has actually changed (unlike default custom elements’ behavior where this method is called even if the same value has been set). Then:
1. _state property will be normal.
2. oldValue and newValue will be always different.

Parameters

name

string

oldValue

string | null

newValue

string | null

Returns

void

Implementation of

CustomElement.attributeChangedCallback

Overrides

WebComponent.attributeChangedCallback

connectedCallback()

connectedCallback(): void

Defined in: web-components-integration/src/SvgImage.ts:97

Called when the element is added to a document.

If overridden, super.connectedCallback() must be the first statement.

Returns

void

Implementation of

CustomElement.connectedCallback

Overrides

WebComponent.connectedCallback

disconnectedCallback()

disconnectedCallback(): void

Defined in: web-components-integration/src/SvgImage.ts:106

Called when the element is removed from a document.

Returns

void

Implementation of

CustomElement.disconnectedCallback

getAttribute()

getAttribute(name): string | null

Defined in: web-components-integration/src/WebComponent.ts:412

The getAttribute() method of the element.

MDN Reference

Parameters

name

string

Returns

string | null

Implementation of

CustomElement.getAttribute

Inherited from

WebComponent.getAttribute

getStyleId()

getStyleId(): string

Defined in: web-components-integration/src/SvgImage.ts:131

Returns

string

ID of a <style> element that styles this component

removeAttribute()

removeAttribute(name): void

Defined in: web-components-integration/src/WebComponent.ts:423

The Element method removeAttribute() removes the attribute with the specified name from the element.

MDN Reference

Parameters

name

string

Returns

void

Implementation of

CustomElement.removeAttribute

Inherited from

WebComponent.removeAttribute

setAttribute()

setAttribute(name, value): void

Defined in: web-components-integration/src/WebComponent.ts:419

The setAttribute() method of the Element interface sets the value of an attribute on the specified element.

MDN Reference

Parameters

name

string

value

string

Returns

void

Implementation of

CustomElement.setAttribute

Inherited from

WebComponent.setAttribute

toggleAttribute()

toggleAttribute(name, force?): boolean

Defined in: web-components-integration/src/WebComponent.ts:427

The toggleAttribute() method of the present and adding it if it is not present) on the given element.

MDN Reference

Parameters

name

string

force?

boolean

Returns

boolean

Implementation of

CustomElement.toggleAttribute

Inherited from

WebComponent.toggleAttribute

_ctor()

protected _ctor(): typeof WebComponent

Defined in: web-components-integration/src/WebComponent.ts:485

Returns a constructor of this class

If you need to refer to your own class, type it like so:

class MyClass extends WebComponent {
  declare protected _ctor: () => typeof MyClass
}

Returns

typeof WebComponent

constructor of this class

Inherited from

WebComponent._ctor

_init()

protected _init(): void

Defined in: web-components-integration/src/WebComponent.ts:353

Initializes component state.

Custom elements may not add attributes or children in a constructor, so separate initialization is required. Thus, this method is called whenever an attribute is accessed or in a microtask after component’s constructor has run.

Initialization is performed only once.