SVGIcon – Documentation

⇠ Go back to GitHub repository

Overview

Classes

EventFronta ℗: Caching "events info" primary for attributeChangedCallback. This in fact caches all function arguments to reproduce calling later.
SVGIconElement ⇐ HTMLElement: SVGIcon Custom Element. When created new <svg-icon> tag it registers global style – see style. Also EventFronta for attributes changes (before element mounitg) is registered there.

Objects

style : object ℗
aliases : object ℗: Grouping alises functionalities

Functions

createElement() ℗: Creates elemnet in svg namespace
setHref(element, value) ℗: Sets 'xlink:href' for given element
setAlias(alias, target): Registers new alias – this affect only newly created tags <svg-icon> since modification!
removeAlias(alias): Removes registered alias – this affect only newly created tags <svg-icon> since modification!
changeOptions(def): Intended to changing defaults options in options and options

Typedefs

style_options : Object: Contains options for generating default styles for <svg-icon>. Changes makes sence only before fisrt <svg-icon> is created. See style.cerate.
aliases_options : object: Options for setting/getting/using aliases (mainly separator). Changes affect only newly created tags <svg-icon> since modification!

Content

EventFronta ℗

Caching "events info" primary for attributeChangedCallback. This in fact caches all function arguments to reproduce calling later.

Kind: global class (defined@14)
Access: private

EventFronta ℗

eventFronta.add(event_info, [method])

Refister new event

Kind: instance method of EventFronta (defined@20)

Param	Type	Default	Description
event_info	`Array`		All necessary infos for later invoking
[method]	`String`	`"push"`	In fact name of operation in `Array.prototype` (not used any more). Understands as enum of: push, unshift.

eventFronta.serveAll(callback)

Proccess all cached events

Kind: instance method of EventFronta (defined@28)

Param	Type	Description
callback	`function`	Function accepting array of cached arguments

eventFronta.clear()

Empty cache

Kind: instance method of EventFronta (defined@38)

SVGIconElement ⇐ `HTMLElement`

SVGIcon Custom Element. When created new <svg-icon> tag it registers global style – see style. Also EventFronta for attributes changes (before element mounitg) is registered there.

Kind: global class (defined@182)
Extends: HTMLElement
Access: public
Properties

Name	Type	Description
_icon	`HTMLElement`	Current icon (`<use>` tag) reference
_onmount_attributes	`EventFronta`	Log events for

SVGIconElement ⇐ HTMLElement
- instance
  - .renderIcon() ⇒ HTMLElement
  - .setIcon()
  - .connectedCallback()
  - .disconnectedCallback()
  - .attributeChangedCallback()
- static
  - .observedAttributes

svgIconElement.renderIcon() ⇒ `HTMLElement`

Prepare <svg> and <use> tag for icon.

Kind: instance method of SVGIconElement (defined@195)
Returns: HTMLElement - <use> reference
Access: public

svgIconElement.setIcon()

Sets href of current icon (SVGIconElement properties)

Kind: instance method of SVGIconElement (defined@207)
Access: public

svgIconElement.connectedCallback()

Life cycle callback: This method is called when element is mounted to DOM. It renders icon (renderIcon) and process all cached attributeChange events.

Kind: instance method of SVGIconElement (defined@221)
Access: public

svgIconElement.disconnectedCallback()

Life cycle callback: Called when element is removed from DOM. It clears icon and listenres.

Kind: instance method of SVGIconElement (defined@230)
Access: public

svgIconElement.attributeChangedCallback()

Life cycle callback: Element atribute change handler (see observedAttributes). It calls setIcon or save events params into SVGIconElement (if element wasn’t mounted).

Kind: instance method of SVGIconElement (defined@246)
Access: public

SVGIconElement.observedAttributes

All properties theirs changes will be cached by attributeChangedCallback

Kind: static property of SVGIconElement (defined@240)
Access: public

style : `object` ℗

Kind: global namespace (defined@62)
Access: private

style : object ℗
- .options
- .is_created ℗
- .create()

style.options

Kind: static property of style (defined@68)
Access: public
Properties

Name	Type
options	`style_options`

style.is_created ℗

Keeping information the global style was created – see style.cerate

Kind: static property of style (defined@75)
Access: private
Properties

Name	Type	Default
[is_created]	`boolean`	`false`

style.create()

Creates new <style> inside <head> with default styling of <svg-icon> (displays block and size)

Kind: static method of style (defined@82)
Access: public

aliases : `object` ℗

Grouping alises functionalities

Kind: global namespace (defined@105)
Access: private

aliases : object ℗
- .options
- .list ℗
- .has(alias) ⇒ boolean
- .get(alias)

aliases.options

Kind: static property of aliases (defined@111)
Access: public
Properties

Name	Type
options	`aliases_options`

aliases.list ℗

Contains all registered aliases

Kind: static property of aliases (defined@117)
Access: private
Properties

Name	Type
list	`Map` \| `null`

aliases.has(alias) ⇒ `boolean`

Existence check

Kind: static method of aliases (defined@125)
Access: public

Param	Type	Description
alias	`string`	Alias name

aliases.get(alias)

Get coresponding path for given alias name. Use has before for existence check!

Kind: static method of aliases (defined@132)
Access: public

Param	Type	Description
alias	`string`	Alias name

createElement() ℗

Creates elemnet in svg namespace

Kind: global function (defined@9)
Access: private

setHref(element, value) ℗

Sets 'xlink:href' for given element

Kind: global function (defined@49)
Access: private

Param	Type
element	`SVGUseElement`
value	`String`

setAlias(alias, target)

Registers new alias – this affect only newly created tags <svg-icon> since modification!

Kind: global function (defined@146)
Access: public

Param	Type	Description
alias	`string`	Alias name
target	`string`	Corresponding full path

Example

setAlias("icon", "icons_file.svg#");
document.body.innerHTML+= '<svg-icon use="icon-icon_name"></svg-icon>';
//is equivalent to
document.body.innerHTML+= '<svg-icon use="icons_file.svg#icon_name"></svg-icon>';

removeAlias(alias)

Removes registered alias – this affect only newly created tags <svg-icon> since modification!

Kind: global function (defined@156)
Access: public

Param	Type	Description
alias	`string`	Alias name

changeOptions(def)

Intended to changing defaults options in options and options

Kind: global function (defined@170)
Access: public

Param	Type	Description
def	`object`
[def.style]	`style_options`	Changing style options
[def.aliases]	`aliases_options`	Changing aliases options

style_options : `Object`

Contains options for generating default styles for <svg-icon>. Changes makes sence only before fisrt <svg-icon> is created. See style.cerate.

Kind: global typedef (defined@50)
Properties

Name	Type	Default	Description
[allow]	`boolean`	`true`	Allow creating global default styles
[fit]	`string`	`"contain"`	CSS `fit` property of `<svg>` inside `<svg-icon>`
[size_variable]	`string`	`"--svg-icon-size"`	The full name of CSS variable for changin icon size (width and height)

aliases_options : `object`

Options for setting/getting/using aliases (mainly separator). Changes affect only newly created tags <svg-icon> since modification!

Kind: global typedef (defined@94)
Properties

Name	Type	Default	Description
[separator]	`string`	`"-"`	Separator for aliases: `alias`separator`icon_name`.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SVGIcon-namespace.md

SVGIcon-namespace.md

SVGIcon – Documentation

Classes

Objects

Functions

Typedefs

EventFronta ℗

eventFronta.add(event_info, [method])

eventFronta.serveAll(callback)

eventFronta.clear()

SVGIconElement ⇐ `HTMLElement`

svgIconElement.renderIcon() ⇒ `HTMLElement`

svgIconElement.setIcon()

svgIconElement.connectedCallback()

svgIconElement.disconnectedCallback()

svgIconElement.attributeChangedCallback()

SVGIconElement.observedAttributes

style : `object` ℗

style.options

style.is_created ℗

style.create()

aliases : `object` ℗

aliases.options

aliases.list ℗

aliases.has(alias) ⇒ `boolean`

aliases.get(alias)

createElement() ℗

setHref(element, value) ℗

setAlias(alias, target)

removeAlias(alias)

changeOptions(def)

style_options : `Object`

aliases_options : `object`

Files

SVGIcon-namespace.md

Latest commit

History

SVGIcon-namespace.md

File metadata and controls

SVGIcon – Documentation

Classes

Objects

Functions

Typedefs

EventFronta ℗

eventFronta.add(event_info, [method])

eventFronta.serveAll(callback)

eventFronta.clear()

SVGIconElement ⇐ HTMLElement

svgIconElement.renderIcon() ⇒ HTMLElement

svgIconElement.setIcon()

svgIconElement.connectedCallback()

svgIconElement.disconnectedCallback()

svgIconElement.attributeChangedCallback()

SVGIconElement.observedAttributes

style : object ℗

style.options

style.is_created ℗

style.create()

aliases : object ℗

aliases.options

aliases.list ℗

aliases.has(alias) ⇒ boolean

aliases.get(alias)

createElement() ℗

setHref(element, value) ℗

setAlias(alias, target)

removeAlias(alias)

changeOptions(def)

style_options : Object

aliases_options : object

SVGIconElement ⇐ `HTMLElement`

svgIconElement.renderIcon() ⇒ `HTMLElement`

style : `object` ℗

aliases : `object` ℗

aliases.has(alias) ⇒ `boolean`

style_options : `Object`

aliases_options : `object`