j-SVGIcons

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Diese Komponente registriert eine neue Webkomponente in der Form <ui-svgicon name="icon_name"></ui-svgicon>.

Verwenden Sie den SVG-Sprites-Generator https://svgsprit.es/

Konfiguration:

url {String} eine URL-Adresse zur SVG-Datei (Standard: empty)
size {Number} eine Standardbildbreite (Standard: empty)

Attribute <ui-svgicon>:

name {String} optional, Symbolname
size {Number} optional, eine Bildgröße (Standard: config.size)
selected {String} optional, ausgewählter Symbolname (wird angezeigt, wenn das übergeordnete Element die Klasse .selected enthält)

Verwenden Sie es mit <ui-component name="svgicons">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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>