Class SvgIcon

Basic SVG icon, extends SvgImage.

Usage:

import iconSrc from "./path/to/icon.svg";

const icon = new SvgIcon(iconSrc, ".my-container") // Create and mount icon
  .setContainerAttrs({ title: "My icon" }) // Set container attributes
  .setColor("red") // Set icon color to red
  .setColorTransition("0.2s ease-out"); // Change icon color transition

Internal API

You can use this API to extend SvgIcon. This API is the same as in SvgImage, but with additional methods.

Use SvgIcon._updateWrapperBeforeUserAttrsSet, SvgIcon._updateWrapperAfterUserAttrsSet to set custom wrapper (<span>) attributes.

SvgIcon._updateSvgBeforeUserAttrsSet should call super._updateSvgBeforeUserAttrsSet().

Hierarchy (view full)

SvgImage
- SvgIcon

Constructors

constructor

new SvgIcon(src, mountTo?): SvgIcon
Parameters
- src: string
- Optional mountTo: string | Element
Returns SvgIcon
Overrides SvgImage.constructor
- Defined in vanilla-integration/src/SvgIcon.ts:36

Properties

`Protected` _color

_color: undefined | string

`Protected` _colorTransition

_colorTransition: undefined | string

`Protected` _container

_container: undefined | Element

`Protected` _size

_size: undefined | string

`Protected` _span

_span: HTMLSpanElement

`Protected` _src

_src: undefined | string

User-provided source code

`Protected` _svgAttrs

_svgAttrs: Record<string, any> = {}

User-provided attributes

`Protected` `Readonly` _svgEl

_svgEl: SVGElement

`Protected` _updateSrcRes

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

Last src update result

Type declaration

Optional attrs?: undefined
Optional id?: undefined

Type declaration

attrs: {
    height: string;
    viewBox: string;
    width: string;
}
- height: string
- viewBox: string
- width: string
id: string

Type declaration

Optional attrs?: undefined
id: string

`Protected` `Readonly` _useEl

_useEl: SVGUseElement

`Protected` _useElAttrs

_useElAttrs: Record<string, any> = {}

User-provided attributes

Methods

`Protected` _setWrapperClass

_setWrapperClass(): void
Returns void
- Defined in vanilla-integration/src/SvgIcon.ts:96

`Protected` _updateSvgAfterUserAttrsSet

_updateSvgAfterUserAttrsSet(): void
Called after user-provided attributes are set. You can use this function to set custom SVG element attributes.

Returns void
Inherited from SvgImage._updateSvgAfterUserAttrsSet
- Defined in vanilla-integration/src/SvgImage.ts:145

`Protected` _updateSvgBeforeUserAttrsSet

_updateSvgBeforeUserAttrsSet(): void
Called before user-provided attributes are set. You can use this function to set custom SVG element attributes.

Returns void
Overrides SvgImage._updateSvgBeforeUserAttrsSet
- Defined in vanilla-integration/src/SvgIcon.ts:60

`Protected` _updateSvgEl

_updateSvgEl(): SvgIcon
Updates SVG element: sets SVG source code, clears previous attributes, sets new attributes

Returns SvgIcon
this
Inherited from SvgImage._updateSvgEl
- Defined in vanilla-integration/src/SvgImage.ts:124

`Protected` _updateUseEl

_updateUseEl(): SvgIcon
Updates <use> element attributes

Returns SvgIcon
this
Inherited from SvgImage._updateUseEl
- Defined in vanilla-integration/src/SvgImage.ts:161

`Protected` _updateUseElAfterUserAttrsSet

_updateUseElAfterUserAttrsSet(): void
Called after user-provided attributes are set. You can use this function to set custom <use> element attributes.

Returns void
Inherited from SvgImage._updateUseElAfterUserAttrsSet
- Defined in vanilla-integration/src/SvgImage.ts:182

`Protected` _updateUseElBeforeUserAttrsSet

_updateUseElBeforeUserAttrsSet(): void
Called before user-provided attributes are set. You can use this function to set custom <use> element attributes.

Returns void
Inherited from SvgImage._updateUseElBeforeUserAttrsSet
- Defined in vanilla-integration/src/SvgImage.ts:177

`Protected` _updateWrapperAfterUserAttrsSet

_updateWrapperAfterUserAttrsSet(): void
Called after user-provided attributes are set. You can use this function to set custom wrapper (<span>) attributes.

Returns void
- Defined in vanilla-integration/src/SvgIcon.ts:94

`Protected` _updateWrapperBeforeUserAttrsSet

_updateWrapperBeforeUserAttrsSet(): void
Called before user-provided attributes are set. You can use this function to set custom wrapper (<span>) attributes.

Returns void
- Defined in vanilla-integration/src/SvgIcon.ts:89

getColor

getColor(): string
Returns string
Current icon color or empty string, if color is unset
- Defined in vanilla-integration/src/SvgIcon.ts:143

getColorTransition

getColorTransition(): string
Returns string
Current icon color transition or empty string, if transition is unset
- Defined in vanilla-integration/src/SvgIcon.ts:161

getContainer

getContainer(): undefined | Element
Returns undefined | Element
A container of this image, or undefined, if image is not mounted
Inherited from SvgImage.getContainer
- Defined in vanilla-integration/src/SvgImage.ts:207

getSize

getSize(): string
Returns string
Current icon size or empty string, if size is unset
- Defined in vanilla-integration/src/SvgIcon.ts:125

getSrc

getSrc(): undefined | string
Returns undefined | string
SVG source code
Inherited from SvgImage.getSrc
- Defined in vanilla-integration/src/SvgImage.ts:200

getSvgEl

getSvgEl(): SVGElement
Returns <svg> element.

To assign attributes, use setSvgElAttrs instead.

Returns SVGElement
<svg> element
Inherited from SvgImage.getSvgEl
- Defined in vanilla-integration/src/SvgImage.ts:218

getUseEl

getUseEl(): SVGUseElement
Returns <use> element.

To assign attributes, use setSvgElAttrs instead.

Returns SVGUseElement
<use> element
Inherited from SvgImage.getUseEl
- Defined in vanilla-integration/src/SvgImage.ts:229

getWrapper

getWrapper(): HTMLSpanElement
Returns HTMLSpanElement
Wrapper (<span>) element
- Defined in vanilla-integration/src/SvgIcon.ts:103

mount

mount(to): this
Mounts image to the given element
Parameters
- to: ElementOrSelector
  Element or selector of an element to mount image to
Returns this
this
Overrides SvgImage.mount
- Defined in vanilla-integration/src/SvgIcon.ts:48

setColor

setColor(color): SvgIcon
Sets icon color. Empty string or undefined unsets color.
Parameters
- color: undefined | string
  Color to set, for example: "red", "var(--icon-color)".
Returns SvgIcon
this
- Defined in vanilla-integration/src/SvgIcon.ts:134

setColorTransition

setColorTransition(transition?): SvgIcon
Sets icon color transition. This transition is applied when icon color is changed.
Parameters
- transition: string = DEFAULT_COLOR_TRANSITION
  Transition to set, for example: "0.3s linear", "var(--icon-transition)"
Returns SvgIcon
this
- Defined in vanilla-integration/src/SvgIcon.ts:152

setSize

setSize(size): SvgIcon
Sets icon size. Empty string or undefined unsets size.
Parameters
- size: undefined | string
  Size to set, for example: "24px", "1rem"
Returns SvgIcon
this
- Defined in vanilla-integration/src/SvgIcon.ts:112

setSrc

setSrc(src): SvgIcon
Sets SVG source code
Parameters
- src: string
  SVG source code
Returns SvgIcon
this
Inherited from SvgImage.setSrc
- Defined in vanilla-integration/src/SvgImage.ts:189

setSvgElAttrs

setSvgElAttrs(attrs): SvgIcon
Sets <svg> element attributes. It won't remove id, class and style.
Parameters
- attrs: Record<string, any>
  Attributes to set
Returns SvgIcon
this
Inherited from SvgImage.setSvgElAttrs
- Defined in vanilla-integration/src/SvgImage.ts:115

setUseElAttrs

setUseElAttrs(attrs): SvgIcon
Sets <use> element attributes. It won't remove id, class and style.
Parameters
- attrs: Record<string, any>
  Attributes to set
Returns SvgIcon
this
Inherited from SvgImage.setUseElAttrs
- Defined in vanilla-integration/src/SvgImage.ts:152

setWrapperAttrs

setWrapperAttrs(attrs): SvgIcon
Sets wrapper (<span>) element attributes.

Warning: you can't change class, size, color and color transition using this method
Parameters
- attrs: Record<string, any>
  Attributes to set
Returns SvgIcon
this
- Defined in vanilla-integration/src/SvgIcon.ts:72

unmount

unmount(): this
Removes image from the container

Returns this
this
Overrides SvgImage.unmount
- Defined in vanilla-integration/src/SvgIcon.ts:53

Class SvgIcon

Internal API

Hierarchy (view full)

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

src: string

Optional mountTo: string | Element

Returns SvgIcon

Properties

Protected _color

Protected _colorTransition

Protected _container

Protected _size

Protected _span

Protected _src

Protected _svgAttrs

Protected Readonly _svgEl

Protected _updateSrcRes

Type declaration

Optional attrs?: undefined

Optional id?: undefined

Type declaration

attrs: { height: string; viewBox: string; width: string; }

height: string

viewBox: string

width: string

id: string

Type declaration

Optional attrs?: undefined

id: string

Protected Readonly _useEl

Protected _useElAttrs

Methods

Protected _setWrapperClass

Returns void

Protected _updateSvgAfterUserAttrsSet

Returns void

Protected _updateSvgBeforeUserAttrsSet

Returns void

Protected _updateSvgEl

Returns SvgIcon

Protected _updateUseEl

Returns SvgIcon

Protected _updateUseElAfterUserAttrsSet

Returns void

Protected _updateUseElBeforeUserAttrsSet

Returns void

Protected _updateWrapperAfterUserAttrsSet

Returns void

Protected _updateWrapperBeforeUserAttrsSet

Returns void

getColor

Returns string

getColorTransition

Returns string

getContainer

Returns undefined | Element

getSize

Returns string

getSrc

Returns undefined | string

getSvgEl

Returns SVGElement

getUseEl

Returns SVGUseElement

getWrapper

Returns HTMLSpanElement

mount

Parameters

to: ElementOrSelector

Returns this

setColor

Parameters

color: undefined | string

Returns SvgIcon

`Optional` mountTo: string | Element

`Protected` _color

`Protected` _colorTransition

`Protected` _container

`Protected` _size

`Protected` _span

`Protected` _src

`Protected` _svgAttrs

`Protected` `Readonly` _svgEl

`Protected` _updateSrcRes

`Optional` attrs?: undefined

`Optional` id?: undefined

attrs: {
height: string;
viewBox: string;
width: string;
}

`Optional` attrs?: undefined

`Protected` `Readonly` _useEl

`Protected` _useElAttrs

`Protected` _setWrapperClass

`Protected` _updateSvgAfterUserAttrsSet

`Protected` _updateSvgBeforeUserAttrsSet

`Protected` _updateSvgEl

`Protected` _updateUseEl

`Protected` _updateUseElAfterUserAttrsSet

`Protected` _updateUseElBeforeUserAttrsSet

`Protected` _updateWrapperAfterUserAttrsSet

`Protected` _updateWrapperBeforeUserAttrsSet