{% set pageTitle = 'ALVADI Image Plugin' %}
{% extends '../_layouts/_dev.twig' %}
{% block content %}
	<h2>SVG иконки</h2>

	{% set main = ["logo", "logo-sm", "logo-ee", "logo-fi", "logo-al-2", "home", "mapstreets", "subscribe-envelope", "subscribe-envelope-success", "subscribe-envelope-success-2", "globe", "success", "info", "info-triangle", "magnifier", "envelope", "phone", "phone-2", "mapmarker", "mapmarker-track", "mapmarker-track-2", "clock", "hourglass", "credit-card", "truck", "truck-2", "truck-3", "truck-free-delivery", "truck-error-delivery", "truck-exclamation-delivery", "truck-info", "sedan", "bike", "tractor", "target-blank", "car", "folder", "folder-list", "list", "user", "user-2", "users", "lock", "locked", "cart", "blank", "wallet", "wallet-2", "cross", "cross-round", "anonymous", "bill", "bill-2", "request-refund", "filter", "filter-reset", "gear", "parts", "stats", "eye", "order", "order-2", "cloud", "plane", "trash", "bankrupt", "percentage", "sale", "cars", "track", "comment", "folder-tree", "pay", "delivery", "question", "terms", "calendar", "firm", "suitcase", "discount", "freon-container", "freon-container-2", "arrow-move", "arrow-down", "arrow-down-circle", "arrow-right", "angle-down", "i-arrow-left", "i-arrow-right", "i-arrow-up", "i-arrow-down", "i-paid", "i-pencil", "i-change", "i-help", "i-bullhorn", "i-copy", "i-customs", "i-send", "i-spare-part", "i-nothing", "i-languages", "i-currencies", "i-mapmarkers", "fb"] %}
	<dl class="list-svgIcons">
		<dt>MAIN-SPRITE.SVG<span class="text-primary fw-normal"> - {{ '<svg><use xlink:href="{{ svg("images/svg/main-sprite.svg#ID") }}"></use></svg>'|escape }}</span></dt>
		{% for id in main %}
			<dd>
				<div class="svgIcon">
					<div class="svgIcon__icon"{% if id in ['subscribe-envelope-success-2'] %} style="background: rgba(0,0,0,.8);" {% endif %}>
						<svg><use xlink:href="/images/svg/main-sprite.svg#{{ id }}"></use></svg>
					</div>
					<div class="svgIcon__id">{{ id }}</div>
				</div>
			</dd>
		{% endfor %}
	</dl>

	<div class="mb-40"></div>

	{% set panel = ["i-money", "i-question", "i-dismiss", "i-bug", "i-flag", "i-broom", "i-phone", "i-hourglass", "i-cart", "i-attention", "i-sadness", "i-freon", "i-vin", "i-envelope", "i-envelope-success", "i-like", "i-dislike"] %}
	<dl class="list-svgIcons">
		<dt>PANEL-SPRITE.SVG<span class="text-primary fw-normal"> - {{ '<svg><use xlink:href="{{ svg("images/svg/panel-sprite.svg#ID") }}"></use></svg>'|escape }}</span></dt>
		{% for id in panel %}
			<dd>
				<div class="svgIcon">
					<div class="svgIcon__icon">
						<svg><use xlink:href="/images/svg/panel-sprite.svg#{{ id }}"></use></svg>
					</div>
					<div class="svgIcon__id">{{ id }}</div>
				</div>
			</dd>
		{% endfor %}
	</dl>

	<div class="mb-40"></div>

	<h3>Использование SVG</h3>
	Вставка в TWIG
	<pre><code>{{ '<svg><use xlink:href="{{ svg("images/svg/main-sprite.svg#ID") }}"></use></svg>'|escape }}</code></pre>

	С размерами
	<pre><code>{{ '<svg width="16" height="16"><use xlink:href="{{ svg("images/svg/main-sprite.svg#ID") }}"></use></svg>'|escape }}</code></pre>

	Задать цвет можно через style
	<pre><code>{{ '<svg style="color: red;"><use xlink:href="{{ svg("images/svg/main-sprite.svg#ID") }}"></use></svg>'|escape }}</code></pre>
	Или через цветовые классы
	<pre><code>{{ '<svg class="color-red"><use xlink:href="{{ svg("images/svg/main-sprite.svg#ID") }}"></use></svg>'|escape }}</code></pre>

	<div class="flex-row">
		<div class="flex-col">
			<dl>
				<dt>Цветовые классы в каталоге:</dt>
				<dd><span class="color-white" style="background: #444; padding: 0 4px;">color-white</span></dd>
				<dd class="color-black">color-black</dd>
				<dd class="color-primary">color-primary</dd>
				<dd class="color-danger">color-danger</dd>
				<dd class="color-green">color-green</dd>
				<dd class="color-success">color-success</dd>
				<dd class="color-toxic">color-toxic</dd>
				<dd class="color-warning">color-warning</dd>
				<dd class="color-gray">color-gray</dd>
				<dd class="color-wild">color-wild</dd>
				<dd class="color-violet">color-violet</dd>
				<dd class="text-primary">text-primary</dd>
				<dd class="text-success">text-success</dd>
				<dd class="text-success">text-success-light</dd>
				<dd class="text-danger">text-danger</dd>
				<dd class="text-warning">text-warning</dd>
			</dl>
		</div>
		<div class="flex-col">
			<dl>
				<dt>Цветовые классы в панеле:</dt>
				<dd>color-white</dd>
				<dd>color-black</dd>
				<dd>color-primary</dd>
				<dd>color-secondary</dd>
				<dd>color-danger</dd>
				<dd>color-warning</dd>
				<dd>color-success</dd>
				<dd>color-green</dd>
				<dd>color-green-light</dd>
				<dd>color-toxic</dd>
				<dd>color-wild</dd>
				<dd>color-violet</dd>
				<dd>color-dark-violet</dd>
				<dd>color-light-violet</dd>
				<dd>color-gray-dark</dd>
				<dd>color-gray</dd>
				<dd>color-gray-light</dd>
				<dd>color-gray-lighter</dd>
				<dd>color-blue-lighter</dd>
			</dl>
		</div>
	</div>

	<div class="mb-40"></div>

{% endblock %}