refactor

Refs: #7036
public-ui · Dec 10, 2024 · 85646db · 85646db
1 parent 3e67203
commit 85646db
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 22 deletions.
diff --git a/packages/components/src/components/icon/shadow.tsx b/packages/components/src/components/icon/shadow.tsx
@@ -1,6 +1,6 @@
 import type { IconAPI, IconStates, LabelPropType } from '../../schema';
 import { validateLabel, watchString } from '../../schema';
-import { Component, h, Prop, State, Watch } from '@stencil/core';
+import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
 import clsx from 'clsx';
@@ -18,20 +18,21 @@ export class KolIcon implements IconAPI {
 	public render(): JSX.Element {
 		const ariaShow = this.state._label.length > 0;
 		return (
-			<i
-				aria-hidden={ariaShow ? undefined : 'true'}
-				/**
-				 * Die Auszeichnung `aria-hidden` ist eigentlich nicht erforderlich, da die aktuellen
-				 * Screenreader, wie NVDA und JAWS, es auch ohne `aria-hidden` nicht vorlesen.
-				 *
-				 * Referenz: https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden
-				 */
-				aria-label={ariaShow ? this.state._label : undefined}
-				class={clsx('kol-icon', this.state._icons)}
-				exportparts="icon"
-				part="icon"
-				role="img"
-			></i>
+			<Host exportparts="icon" class="kol-icon">
+				<i
+					aria-hidden={ariaShow ? undefined : 'true'}
+					/**
+					 * Die Auszeichnung `aria-hidden` ist eigentlich nicht erforderlich, da die aktuellen
+					 * Screenreader, wie NVDA und JAWS, es auch ohne `aria-hidden` nicht vorlesen.
+					 *
+					 * Referenz: https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden
+					 */
+					aria-label={ariaShow ? this.state._label : undefined}
+					class={clsx('kol-icon__icon', this.state._icons)}
+					part="icon"
+					role="img"
+				></i>
+			</Host>
 		);
 	}
 

diff --git a/packages/components/src/components/icon/style.scss b/packages/components/src/components/icon/style.scss
@@ -3,20 +3,23 @@
 
 @layer kol-component {
 	/*
-	* display necessary to center icon
+	* Necessary to center icon
 	 */
 	:host {
 		display: contents;
 	}
 
-	/*
+	.kol-icon {
+		&__icon {
+			font-size: rem(16);
+			color: inherit;
+			line-height: inherit;
+		}
+		/*
    * The <code>:important</code> is important, because we should always override the font icon style.
    */
-	.kol-icon {
-		color: inherit;
-		line-height: inherit;
-		font-size: inherit !important;
-		&:before {
+		&__icon,
+		&__icon:before {
 			font-size: inherit !important;
 		}
 	}