SvgIcon

Defined in: web-components-integration/src/SvgIcon.ts:40

Basic SVG icon.

If you plan to define SvgImage under a non-default tag, define it before creating SVG icons. Otherwise, an error will be thrown.

Example

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

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

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

// Create icon:
const icon = new SvgIcon();
// or:
const icon = document.createElement("svg-icon");

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

// Stylize icon:
icon.color = "red";
icon.size = "24px";
icon.colorTransition = "0.2s ease-out";

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

Extends

WebComponent

Constructors

Constructor

new SvgIcon(): SvgIcon

Defined in: web-components-integration/src/SvgIcon.ts:72

Returns

SvgIcon

Overrides

WebComponent.constructor

Properties

color?

optional color: string

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

Icon color. Empty string unsets color.

colorTransition

colorTransition: string

Defined in: web-components-integration/src/SvgIcon.ts:65

Icon color transition. Empty string unsets transition.

To set default value, use DEFAULT_COLOR_TRANSITION.

size?

optional size: string

Defined in: web-components-integration/src/SvgIcon.ts:53

Icon size. Empty string unsets size.

src?

optional src: string

Defined in: web-components-integration/src/SvgIcon.ts:48

Image 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

DEFAULT_COLOR_TRANSITION

static DEFAULT_COLOR_TRANSITION: string = SVG_ICON_DEFAULT_COLOR_TRANSITION

Defined in: web-components-integration/src/SvgIcon.ts:41

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: (string | { default: string; name: string; })[]

Defined in: web-components-integration/src/SvgIcon.ts:43

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.

Overrides

WebComponent.props

Methods

attributeChangedCallback()

attributeChangedCallback(name, oldValue, newValue): void

Defined in: web-components-integration/src/SvgIcon.ts:89

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

Overrides

WebComponent.attributeChangedCallback

connectedCallback()

connectedCallback(): void

Defined in: web-components-integration/src/SvgIcon.ts:80

Called when the element is added to a document.

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

Returns

void

Overrides

WebComponent.connectedCallback

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

Inherited from

WebComponent.getAttribute

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

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

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

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.