j-SVGIcons

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Deze component registreert een nieuw webcomponent in de vorm <ui-svgicon name="icon_name"></ui-svgicon>.

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

Configuratie:

url {String} een URL voor de SVG-bestand (default: empty)
size {Number} een standaard afbeeldingsbreedte (default: empty)

De eigenschappen van <ui-svgicon>:

name {String} optie, icon naam
size {Number} optioneel, een afbeeldingsgrootte (default: config.size)
selected {String} optionele, geselecteerde iconennaam (dit wordt weergegeven als het moederelement de .selected klasse bevat)

Gebruik het met <ui-component name="svgicons">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>