fix: lazy load material icons in a single webpack chunk

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>
nextcloud · Mar 13, 2024 · d60477e · d60477e
1 parent ef67c61
commit d60477e
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/src/shared/components/ncIconPicker/NcIconPicker.vue b/src/shared/components/ncIconPicker/NcIconPicker.vue
@@ -1,5 +1,5 @@
 <template>
-	<NcPopover container="body" popup-role="dialog" :shown.sync="showIconPicker">
+	<NcPopover popup-role="dialog" :shown.sync="showIconPicker">
 		<template #trigger="slotProps">
 			<slot v-bind="slotProps" />
 		</template>

diff --git a/src/shared/components/ncIconPicker/mixins/svgHelper.js b/src/shared/components/ncIconPicker/mixins/svgHelper.js
@@ -7,7 +7,11 @@ export default {
 			return atob(strippedUri)
 		},
 		async getContextIcon(iconName) {
-			const { default: icon } = await import(`@mdi/svg/svg/${iconName}.svg`)
+			const { default: icon } = await import(
+				/* webpackChunkName: 'material-icons' */
+				/* webpackMode: 'lazy-once' */
+				`MaterialIcons/${iconName}.svg`
+			)
 
 			return this.uriToSvg(icon)
 		},

diff --git a/src/shared/components/ncIconPicker/partials/Icon.vue b/src/shared/components/ncIconPicker/partials/Icon.vue
@@ -60,6 +60,8 @@ export default {
 .icon-picker__icon {
 	border-radius: 15px !important;
 	padding: 8px !important;
+	width: 30px !important;
+	height: 30px !important;
 	margin: 2px !important;
 	border: 2px solid transparent !important;
 

diff --git a/src/shared/components/ncIconPicker/partials/IconPicker.vue b/src/shared/components/ncIconPicker/partials/IconPicker.vue
@@ -40,7 +40,7 @@ export default {
 <style>
 .icon-picker__icons {
 	max-width: 300px;
-	height: 500px;
+	max-height: 400px;
 	display: grid;
 	grid-template-columns: repeat(5, 1fr);
 	overflow-y: scroll;