<?php

	//Tracy\Debugger::barDump($params);

	foreach($iconSets as $iconSet => $icons) { ?>

		<div class="row">
			<div class="col-24"><h3><?php echo $iconSet; ?></h3></div>
			<?php foreach($icons as $icon) { ?>
				<div class="col-auto">
					<!-- SVG sprite / inline SVG -->
					<!--<svg class="a-icon <?php echo $icon; ?>">
						<use xlink:href="<?php echo $params['appPath']; ?>dist/svg/icomoon/symbol-defs.svg#<?php echo $icon; ?>"></use>
					</svg>-->

					<img src="<?php echo $params['appPath']; ?>dist/svg/icomoon/SVG/<?php echo $icon; ?>.svg" class="a-icon <?php echo $icon; ?>" alt="icon">

					<!-- icon font -->
					<!-- <i class="a-icon <?php echo $icon; ?>"></i> -->

					<!-- SVG image -->
					<!-- <img src="<?php echo $params['appPath']; ?>dist/svg/icomoon/SVG/<?php echo $icon; ?>.svg" class="a-icon <?php echo $icon; ?>" alt="icon"> -->
				</div>
			<?php } ?>
		</div>

		<div style="height: 40px"></div>

	<?php }

?>

.a-icon {

    @include set-variable(icon-size, 1em);
    display: inline-block;

    @if map-has-key($font-families, 'icons') {

        @include icon();
        font-size: var(--icon-size);

    } @else {

        fill: currentColor;
        height: var(--icon-size);
        stroke: currentColor;
        stroke-width: 0;
        vertical-align: middle;
        width: var(--icon-size);

    }

    @if variable-exists(icon-sizes) {

        @each $icon-set, $icon-size in $icon-sizes {

            $icon-size-class: str-slice($icon-set, 1, (str-index($icon-set, 'x') - 1));

            &[class*="ic#{$icon-size-class}-"] {

                @include set-variable(icon-size, $icon-size);

            }

        }

    }

}