From 3be318501d76c28c51e5a4211085b1e7177fdfd7 Mon Sep 17 00:00:00 2001
From: Egor Kloos <egor.kloos@ns.nl>
Date: Fri, 12 Jan 2024 11:59:13 +0100
Subject: [PATCH] Moved styling for icon images to stylesheet

---
 example.html             | 1 -
 forms.html               | 1 -
 index.html               | 1 -
 openprops.html           | 1 -
 src/system-selectors.css | 9 +++++++--
 style-api.html           | 1 -
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/example.html b/example.html
index e5f6358..02ee9ac 100644
--- a/example.html
+++ b/example.html
@@ -313,7 +313,6 @@ <h2>Figure</h2>
 			<p>
 				View on <a href="https://github.com/dutchcelt/system.css">Github</a>.
 				<svg
-					style="display: inline-block; float: unset; vertical-align: middle; margin: unset"
 					aria-hidden="true"
 					height="16"
 					viewBox="0 0 16 16"
diff --git a/forms.html b/forms.html
index a3c67bb..0f648d4 100644
--- a/forms.html
+++ b/forms.html
@@ -114,7 +114,6 @@ <h1>A form with basic layout and input validation</h1>
 			<p>
 				View on <a href="https://github.com/dutchcelt/system.css">Github</a>.
 				<svg
-					style="display: inline-block; float: unset; vertical-align: middle; margin: unset"
 					aria-hidden="true"
 					height="16"
 					viewBox="0 0 16 16"
diff --git a/index.html b/index.html
index f1f7c47..29c078a 100644
--- a/index.html
+++ b/index.html
@@ -85,7 +85,6 @@ <h3>Inspiration</h3>
 			<p>
 				View on <a href="https://github.com/dutchcelt/system.css">Github</a>.
 				<svg
-					style="display: inline-block; float: unset; vertical-align: middle; margin: unset"
 					aria-hidden="true"
 					height="16"
 					viewBox="0 0 16 16"
diff --git a/openprops.html b/openprops.html
index 539e834..3dd23ac 100644
--- a/openprops.html
+++ b/openprops.html
@@ -321,7 +321,6 @@ <h2>Figure</h2>
 			<p>
 				View on <a href="https://github.com/dutchcelt/system.css">Github</a>.
 				<svg
-					style="display: inline-block; float: unset; vertical-align: middle; margin: unset"
 					aria-hidden="true"
 					height="16"
 					viewBox="0 0 16 16"
diff --git a/src/system-selectors.css b/src/system-selectors.css
index 305e78c..6d87a5e 100644
--- a/src/system-selectors.css
+++ b/src/system-selectors.css
@@ -403,15 +403,20 @@
 		display: block;
 		max-inline-size: 100%;
 		block-size: auto;
+		/* explicit small widths are usually icons and shouldn't scale */
+		&:is([width='32'], [width='24'], [width='16']) {
+			display: inline-block;
+			vertical-align: middle;
+		}
 	}
-	:is(p, li, td, dd) > :is(img, picture, svg, figure) {
+	:is(p, li, td, dd) > :is(img, picture, svg, figure):not([width='32'], [width='24'], [width='16']) {
 		float: inline-end;
 		margin-inline-start: var(--system-spacing-column-gap);
 		margin-block: var(--system-spacing-element-block);
 		max-inline-size: 42cqw;
 	}
 	@container --content (width < 42ch) {
-		:is(p, li, dd, td) > :is(img, picture, svg, figure) {
+		:is(p, li, dd, td) > :is(img, picture, svg, figure):not([width='32'], [width='24'], [width='16']) {
 			width: 100%;
 			max-inline-size: unset;
 		}
diff --git a/style-api.html b/style-api.html
index 5e71766..36eabba 100644
--- a/style-api.html
+++ b/style-api.html
@@ -521,7 +521,6 @@ <h3>Browser Bugs</h3>
 			<p>
 				View on <a href="https://github.com/dutchcelt/system.css">Github</a>.
 				<svg
-					style="display: inline-block; float: unset; vertical-align: middle; margin: unset"
 					aria-hidden="true"
 					height="16"
 					viewBox="0 0 16 16"