j-SVGIcons

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

This component registers a new Web component in the form <ui-svgicon name="icon_name"></ui-svgicon>.

Use SVG sprites generator https://svgsprit.es/

Configuration:

url {String} a URL address to the SVG file (default: empty)
size {Number} a default image width (default: empty)

Attributes <ui-svgicon>:

name {String} optional, icon name
size {Number} optional, a size of image (default: config.size)
selected {String} optional, selected icon name (it will be displayed if the parent element will contain .selected class)

Use it with <ui-component name="svgicons">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

example.html

<ui-component name="svgicons" config="url:/svgicons.svg;size:30"></ui-component>

<div class="padding">
	<ui-svgicon name="phone"></ui-svgicon>
	<ui-svgicon name="phone"></ui-svgicon>
	<ui-svgicon name="phone" size="50"></ui-svgicon>
	<span class="toggle">
		<ui-svgicon name="profile" selected="profilefull"></ui-svgicon>
	</span>
</div>

<script>

	setInterval(function() {
		$('.toggle').tclass('selected');
	}, 1500);

</script>