From 8b6da43086e012f27eed796514577df658f60b14 Mon Sep 17 00:00:00 2001
From: Vjacheslav Trushkin <cyberalien@gmail.com>
Date: Fri, 19 Jul 2024 15:41:39 +0300
Subject: [PATCH] chore: add margin auto to icon inside web component

---
 iconify-icon/icon/demo/usage.html     | 74 +++++++++++++++++++++++++++
 iconify-icon/icon/src/render/style.ts |  2 +-
 2 files changed, 75 insertions(+), 1 deletion(-)

diff --git a/iconify-icon/icon/demo/usage.html b/iconify-icon/icon/demo/usage.html
index 9a112a7..b3dfc91 100644
--- a/iconify-icon/icon/demo/usage.html
+++ b/iconify-icon/icon/demo/usage.html
@@ -151,6 +151,11 @@
 						icon: {
 							body: '<mask id="coffee-mask" x="0" y="0" width="16" height="16"><g fill="white"><path d="M5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M8.5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M12-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4" stroke="white" stroke-width="1" fill="none"><animateMotion path="M0 0v-8" calcMode="linear" dur="3s" repeatCount="indefinite" /></path></g><rect y="4" width="16" height="12" fill="black" /><path d="M2 5H13C14.1046 5 15 5.89543 15 7V8C15 9.10457 14.1046 10 13 10H12V14C12 15.1046 11.1046 16 10 16H4C2.89543 16 2 15.1046 2 14V5Z" fill="white" /><path d="M12 6H13C13.5523 6 14 6.44772 14 7V8C14 8.55228 13.5523 9 13 9H12V6Z" fill="black" /></mask><rect mask="url(#coffee-mask)" width="16" height="16" fill="currentColor" />',
 						},
+						animated: {
+							body: '<g stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8L7.13 14" stroke-dasharray="10" stroke-dashoffset="10"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.18s" values="10;0"></animate></path><path d="M5.5 16L2 13" stroke-dasharray="8" stroke-dashoffset="8"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="8;0" begin="0.2s"></animate></path></g>',
+							width: 14,
+							height: 24,
+						},
 					},
 				});
 			})();
@@ -333,6 +338,75 @@
 				mode="style"
 			></iconify-icon>
 		</p>
+		<p>
+			Non-square animated icon (with border):
+			<iconify-icon
+				inline
+				icon="test2:animated"
+				mode="style"
+				style="border: 1px solid #ccc"
+			></iconify-icon>
+			<iconify-icon
+				inline
+				icon="test2:animated"
+				mode="svg"
+				style="border: 1px solid #ccc"
+			></iconify-icon>
+		</p>
+		<p>
+			Making icon square with attributes (with border):
+			<iconify-icon
+				width="1em"
+				height="1em"
+				icon="test2:animated"
+				mode="style"
+				style="border: 1px solid #ccc"
+			></iconify-icon>
+			<iconify-icon
+				width="1em"
+				height="1em"
+				icon="test2:animated"
+				mode="svg"
+				style="border: 1px solid #ccc"
+			></iconify-icon>
+			<iconify-icon
+				width="1em"
+				height="1em"
+				icon="cif:ee"
+				mode="style"
+				style="border: 1px solid #ccc"
+			></iconify-icon>
+			<iconify-icon
+				width="1em"
+				height="1em"
+				icon="cif:ee"
+				mode="svg"
+				style="border: 1px solid #ccc"
+			></iconify-icon>
+		</p>
+		<p>
+			Making icon square with style (with border):
+			<iconify-icon
+				icon="test2:animated"
+				mode="style"
+				style="width: 1em; height: 1em; border: 1px solid #ccc"
+			></iconify-icon>
+			<iconify-icon
+				icon="test2:animated"
+				mode="svg"
+				style="width: 1em; height: 1em; border: 1px solid #ccc"
+			></iconify-icon>
+			<iconify-icon
+				icon="cif:ee"
+				mode="style"
+				style="width: 1em; height: 1em; border: 1px solid #ccc"
+			></iconify-icon>
+			<iconify-icon
+				icon="cif:ee"
+				mode="svg"
+				style="width: 1em; height: 1em; border: 1px solid #ccc"
+			></iconify-icon>
+		</p>
 
 		<h2>Hidden icons, appear on scroll</h2>
 		<div class="observer-test">
diff --git a/iconify-icon/icon/src/render/style.ts b/iconify-icon/icon/src/render/style.ts
index e090583..974f395 100644
--- a/iconify-icon/icon/src/render/style.ts
+++ b/iconify-icon/icon/src/render/style.ts
@@ -38,6 +38,6 @@ export function updateStyle(parent: Element | ShadowRoot, inline: boolean) {
 	styleNode.textContent =
 		':host{display:inline-block;vertical-align:' +
 		(inline ? '-0.125em' : '0') +
-		'}span,svg{display:block}' +
+		'}span,svg{display:block;margin:auto}' +
 		customStyle;
 }