db-ui · nmerget · Apr 15, 2024 · Nov 17, 2023 · Nov 17, 2023 · Nov 20, 2023
@@ -49,7 +49,7 @@ import "@db-ui/components/build/styles/db-ui-42-rollup.css";
 ```tsx
 import { DBButton } from '@db-ui/react-components';
 ...
-<DBButton icon="account" onClick={()=>{console.log("Test")}}>Test</DBButton>
+<DBButton icon="user" onClick={()=>{console.log("Test")}}>Test</DBButton>
 ...
 ```
 

@@ -59,7 +59,7 @@ import { DBButton } from "@db-ui/v-components";
 </script>
 
 <template>
-	<DBButton icon="account">Test</DBButton>
+	<DBButton icon="user">Test</DBButton>
 </template>
 ```
 

@@ -36,7 +36,7 @@ A web-component library containing all components of [DB UX Design System (techn
 import "node_modules/@db-ui/web-components/components/button/button.js";
 
 ...
-<db-button variant="brand" icon="account">Test</db-button>
+<db-button variant="brand" icon="user">Test</db-button>
 ...
 
 ```

@@ -22,24 +22,6 @@ const generateIconTypes = () => {
 
 				let iconPaths = FS.readdirSync(path_string);
 
-				if (
-					iconPaths.filter(
-						(path) => path === 'inverted' || path === 'regular'
-					).length === 2
-				) {
-					return [
-						...previousValue,
-						`// Directory: ${currentValue}-inverted`,
-						...FS.readdirSync(
-							`${foundationAssetsPath}/${currentValue}/inverted`
-						),
-						`// Directory: ${currentValue}-regular`,
-						...FS.readdirSync(
-							`${foundationAssetsPath}/${currentValue}/regular`
-						)
-					];
-				}
-
 				return [
 					...previousValue,
 					`// Directory: ${currentValue}`,
@@ -48,7 +30,9 @@ const generateIconTypes = () => {
 			}, [])
 			.filter(
 				(icon) =>
-					(!icon.includes('_solid') && icon.includes('_24')) ||
+					(!icon.includes('_inverted') &&
+						!icon.includes('_filled') &&
+						icon.includes('_24')) ||
 					icon.startsWith('//')
 			)
 			.map((icon) =>

@@ -24,7 +24,7 @@ Main use-case to set/overwrite an icon inside a component. Example:
 @use "@db-ui/foundations/build/scss/icons";
 
 .db-xxx {
-	@include icons.set-icon("expand_more", "after");
+	@include icons.set-icon("chevron_down", "after");
 }
 ```
 

@@ -29,7 +29,7 @@ const testButton = () => {
 			mount
 		}) => {
 			const component = await mount(
-				<DBButton icon="account" noText={true} variant={variant}>
+				<DBButton icon="user" noText={true} variant={variant}>
 					Account
 				</DBButton>
 			);
@@ -58,7 +58,7 @@ test.describe('DBButton', () => {
 		mount
 	}) => {
 		await mount(
-			<DBButton icon="account" noText={true}>
+			<DBButton icon="user" noText={true}>
 				lorem ipsum
 			</DBButton>
 		);

@@ -11,11 +11,11 @@
 		</button>
 		<button
 			class="db-button"
-			data-icon="account"
+			data-icon="user"
 			data-variant="brand"
 			type="button"
 		>
-			data-icon="account"
+			data-icon="user"
 		</button>
 		<button
 			class="db-button"

@@ -22,7 +22,7 @@
 
 		&:checked {
 			// Check icon
-			@include icons.set-icon("done");
+			@include icons.set-icon("check");
 
 			// The icon within the checkbox has the same dimensions as the checkbox itself and that for there can't be any border
 			border-width: 0;

@@ -17,7 +17,7 @@ If you use `width !== full` you are able to overwrite the `max-width` with `--db
 			<header class="db-drawer-header">
 				<button
 					class="db-button button-close-drawer is-icon-text-replace"
-					data-icon="close"
+					data-icon="cross"
 					data-variant="ghost"
 				>
 					Close Button

@@ -97,7 +97,7 @@ export default function DBDrawer(props: DBDrawerProps) {
 						<DBButton
 							className="button-close-drawer"
 							id={props.closeButtonId}
-							icon="close"
+							icon="cross"
 							variant="ghost"
 							noText
 							onClick={() => state.handleClose('close')}>

@@ -11,7 +11,7 @@
 				<header class="db-drawer-header">
 					<button
 						class="db-button button-close-drawer is-icon-text-replace"
-						data-icon="close"
+						data-icon="cross"
 						data-variant="ghost"
 					>
 						Close Button

@@ -69,12 +69,12 @@ export class AppComponent {
 		<DBLink href="#">Help</DBLink>
 	</ng-container>
 	<ng-container call-to-action>
-		<DBButton icon="search" variant="ghost" [noText]="true">
+		<DBButton icon="magnifying_glass" variant="ghost" [noText]="true">
 			Search
 		</DBButton>
 	</ng-container>
 	<ng-container *dbActionBar>
-		<DBButton icon="account" variant="ghost" [noText]="true">
+		<DBButton icon="user" variant="ghost" [noText]="true">
 			Profile
 		</DBButton>
 		<DBButton icon="alert" variant="ghost" [noText]="true">

@@ -23,7 +23,7 @@ For general installation and configuration take a look at the [components](https
 					<button
 						id="button-9c38e111-6ef8-4322-9da4-b72cf8223e48"
 						class="db-button button-close-drawer is-icon-text-replace"
-						data-icon="close"
+						data-icon="cross"
 						data-variant="text"
 					>
 						Close Button
@@ -40,7 +40,7 @@ For general installation and configuration take a look at the [components](https
 									<li
 										id="navigation-item-60f3835c-adb0-4267-832a-d8324162d3f6"
 										class="db-navigation-item"
-										data-icon="account"
+										data-icon="user"
 									>
 										<a href="#">Regular (Default)</a>
 									</li>
@@ -78,7 +78,7 @@ For general installation and configuration take a look at the [components](https
 						<button
 							id="button-65ba5268-2f08-47e3-9884-283c7f3e0be8"
 							class="db-button is-icon-text-replace"
-							data-icon="account"
+							data-icon="user"
 							data-variant="text"
 						>
 							Profile</button
@@ -144,7 +144,7 @@ For general installation and configuration take a look at the [components](https
 							<li
 								id="navigation-item-7191fbb8-5319-4480-94d5-c2813fd8b029"
 								class="db-navigation-item"
-								data-icon="account"
+								data-icon="user"
 							>
 								<a href="#">Regular (Default)</a>
 							</li>
@@ -162,7 +162,7 @@ For general installation and configuration take a look at the [components](https
 					<button
 						id="button-46f070bc-adb3-4729-97ae-bfa41e62e51b"
 						class="db-button is-icon-text-replace"
-						data-icon="search"
+						data-icon="magnifying_glass"
 						data-variant="text"
 					>
 						Search
@@ -184,7 +184,7 @@ For general installation and configuration take a look at the [components](https
 					<button
 						id="button-cad51b9a-a428-42ea-91e7-ec52539f8f37"
 						class="db-button is-icon-text-replace"
-						data-icon="account"
+						data-icon="user"
 						data-variant="text"
 					>
 						Profile</button

@@ -36,13 +36,13 @@ const App = () => (
 			</>
 		}
 		callToAction={
-			<DBButton icon="search" variant="ghost" noText>
+			<DBButton icon="magnifying_glass" variant="ghost" noText>
 				Search
 			</DBButton>
 		}
 		actionBar={
 			<>
-				<DBButton icon="account" variant="ghost" noText>
+				<DBButton icon="user" variant="ghost" noText>
 					Profile
 				</DBButton>
 				<DBButton icon="alert" variant="ghost" noText>

@@ -40,12 +40,12 @@ const toggleDrawer = (open: boolean) => {
 			<DBBrand> My Awesome App </DBBrand>
 		</template>
 		<template v-slot:call-to-action>
-			<DBButton icon="search" variant="ghost" :no-text="true">
+			<DBButton icon="magnifying_glass" variant="ghost" :no-text="true">
 				Search
 			</DBButton>
 		</template>
 		<template v-slot:action-bar>
-			<DBButton icon="account" variant="ghost" :no-text="true">
+			<DBButton icon="user" variant="ghost" :no-text="true">
 				Profile
 			</DBButton>
 			<DBButton icon="alert" variant="ghost" :no-text="true">

@@ -20,5 +20,5 @@ import { DBIcon } from '@db-ui/ngx-components';
 
 ```html app.component.html
 <!-- app.component.html -->
-<db-icon icon="account">Icon</db-icon>
+<db-icon icon="user">Icon</db-icon>
 ```
@@ -10,6 +10,6 @@ You could use the `data-icon` or `data-icon-after` attributes on any HTML tag:
 <!-- index.html -->
 ...
 <body>
-	<span data-icon="account"> Icon </span>
+	<span data-icon="user"> Icon </span>
 </body>
 ```
@@ -8,7 +8,7 @@ For general installation and configuration take a look at the [react-components]
 // App.tsx
 import { DBIcon } from "@db-ui/react-components";
 
-const App = () => <DBIcon icon="account">Icon</DBIcon>;
+const App = () => <DBIcon icon="user">Icon</DBIcon>;
 
 export default App;
 ```
@@ -11,6 +11,6 @@ import { DBIcon } from "@db-ui/v-components";
 </script>
 
 <template>
-	<DBIcon icon="account">Icon</DBIcon>
+	<DBIcon icon="user">Icon</DBIcon>
 </template>
 ```
@@ -6,6 +6,6 @@
 		<link rel="stylesheet" href="/styles/db-ui-42.css" />
 	</head>
 	<body style="padding: var(--db-spacing-fixed-md)">
-		<span data-icon="account"> Icon </span>
+		<span data-icon="user"> Icon </span>
 	</body>
 </html>
@@ -1,7 +1,7 @@
 import { GlobalProps, GlobalState, IconProps } from '../../shared/model';
 
 export type DBIconDefaultProps = {
-	variant?: 'default' | 'inverted' | 'solid';
+	variant?: 'default' | 'inverted' | 'filled';
 	weight?: '16' | '20' | '24' | '32' | '48' | '64';
 };
 

@@ -8,14 +8,11 @@
 	<body style="padding: var(--db-spacing-fixed-md)">
 		<span class="db-infotext">No data-icon</span>
 		<span class="db-infotext" data-icon="none">data-icon=none</span>
-		<span class="db-infotext" data-icon="account">Custom Icon</span>
+		<span class="db-infotext" data-icon="user">Custom Icon</span>
 		<span class="db-infotext" data-variant="informational"
 			>informational</span
 		>
-		<span
-			class="db-infotext"
-			data-icon="account"
-			data-variant="informational"
+		<span class="db-infotext" data-icon="user" data-variant="informational"
 			>Overwrite Icon in Variant</span
 		>
 		<span class="db-infotext" data-variant="successful">successful</span>

@@ -11,8 +11,8 @@
 	display: flex;
 
 	@include icons.has-no-icon() {
-		@include icons.to-solid-icon();
-		@include icons.set-icon("info");
+		@include icons.to-filled-icon();
+		@include icons.set-icon("information_circle");
 	}
 
 	&[data-size="small"] {

@@ -25,8 +25,8 @@ $icon-padding: calc(
 	}
 
 	&:has(input[type="search"]) {
-		@include icons.set-icon("search");
-		@include icons.set-icon("cancel", "after");
+		@include icons.set-icon("magnifying_glass");
+		@include icons.set-icon("cross_circle", "after");
 
 		&::after {
 			opacity: 0;
@@ -51,7 +51,7 @@ $icon-padding: calc(
 	}
 
 	&:has(input[type="time"]) {
-		@include icons.set-icon("schedule", "after");
+		@include icons.set-icon("clock", "after");
 	}
 
 	input {

@@ -18,15 +18,15 @@
 
 	&:not([data-variant="inline"]) {
 		&[data-content="internal"] {
-			@include icons.set-icon("arrow_forward", "after");
+			@include icons.set-icon("arrow_right", "after");
 
 			&::after {
 				vertical-align: top;
 			}
 		}
 
 		&[data-content="external"] {
-			@include icons.set-icon("link_external", "after");
+			@include icons.set-icon("arrow_up_right", "after");
 		}
 	}
 

@@ -115,7 +115,7 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 						<div class="db-mobile-navigation-back">
 							<DBButton
 								id={props.backButtonId}
-								icon="arrow_back"
+								icon="arrow_left"
 								variant="ghost"
 								onClick={(
 									event: ClickEvent<HTMLButtonElement>

@@ -49,7 +49,7 @@ import { DBNavigation } from '@db-ui/ngx-components';
 		</ng-container>
 		<ng-container *dbNavigationContent> Navi-Item 1 </ng-container>
 	</db-navigation-item>
-	<db-navigation-item icon="account">
+	<db-navigation-item icon="user">
 		<ng-container *dbNavigationContent>
 			<a href="#">Navi-Item 2</a>
 		</ng-container>

@@ -42,7 +42,7 @@ For general installation and configuration look at the [components](https://www.
 				</menu>
 			</li>
 
-			<li class="db-navigation-item" data-icon="account">
+			<li class="db-navigation-item" data-icon="user">
 				<a href="#">Navi-Item 2</a>
 			</li>
 

@@ -37,7 +37,7 @@ const App = () => (
 		>
 			Navi-Item 1
 		</DBNavigationItem>
-		<DBNavigationItem icon="account">
+		<DBNavigationItem icon="user">
 			<a href="#">Navi-Item 2</a>
 		</DBNavigationItem>
 		<DBNavigationItem disabled>

@@ -32,7 +32,7 @@ import { DBNavigation, DBNavigationItem } from "@db-ui/v-components";
 				</DBNavigationItem>
 			</template>
 		</DBNavigationItem>
-		<DBNavigationItem icon="account">
+		<DBNavigationItem icon="user">
 			<a href="#">Navi-Item 2</a>
 		</DBNavigationItem>
 		<DBNavigationItem :disabled="true">
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,7 +49,7 @@ import "@db-ui/components/build/styles/db-ui-42-rollup.css"; @@
     ```tsx
     import { DBButton } from '@db-ui/react-components';
     ...
-    <DBButton icon="account" onClick={()=>{console.log("Test")}}>Test</DBButton>
+    <DBButton icon="user" onClick={()=>{console.log("Test")}}>Test</DBButton>
     ...
     ```
@@ Expand Down @@