fix: possibility to define two icons on an element again (#588)

db-ui · Sep 29, 2023 · b390420 · b390420
1 parent 399d2e9
commit b390420
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/source/_patterns/00-base/icons/_icons.attributes-mappings.scss b/source/_patterns/00-base/icons/_icons.attributes-mappings.scss
@@ -4,11 +4,9 @@
 @each $icon-name, $icon-glyph in $icon-glyphs {
 	[data-icon="#{$icon-name}"],
 	[data-icon-before="#{$icon-name}"] {
-		&::before {
-			--icon-glyph: "#{$icon-glyph}";
-		}
+		--icon-glyph-before: "#{$icon-glyph}";
 	}
-	[data-icon-after="#{$icon-name}"]::after {
-		--icon-glyph: "#{$icon-glyph}";
+	[data-icon-after="#{$icon-name}"] {
+		--icon-glyph-after: "#{$icon-glyph}";
 	}
 }
diff --git a/source/_patterns/00-base/icons/_icons.helpers.scss b/source/_patterns/00-base/icons/_icons.helpers.scss
@@ -8,7 +8,7 @@
 ) {
 	// We're setting this on the parent tag, so that it could get overwritten via data-icon=*
 	@if $glyph != "" {
-		--icon-glyph: "#{$glyph}";
+		--icon-glyph-#{$position}: "#{$glyph}";
 	}
 
 	&::#{$position} {
@@ -30,8 +30,9 @@
 			);
 		}
 
+		content: var(--icon-glyph-#{$position});
+
 		@if $partial {
-			content: var(--icon-glyph);
 			display: inline-block;
 			/*** icon - partial ***/
 			// * use !important to prevent issues with browser extensions that change fonts

diff --git a/source/_patterns/00-base/icons/icons.scss b/source/_patterns/00-base/icons/icons.scss
@@ -11,6 +11,7 @@
 [data-icon-before] {
 	&::before {
 		@extend %icon;
+		content: var(--icon-glyph-before);
 		margin-inline-end: var(--icon-margin-after, #{$icon-content-space});
 		font-size: var(
 			--icon-font-size-before,
@@ -22,6 +23,7 @@
 [data-icon-after] {
 	&::after {
 		@extend %icon;
+		content: var(--icon-glyph-after);
 		margin-inline-start: var(--icon-margin-before, #{$icon-content-space});
 		font-size: var(
 			--icon-font-size-after,