Merge pull request #4894 from nextcloud-libraries/feat/noid/note-card…

…-icon-slot

feat(NcNoteCard): provide a slot for inserting a custom icon instead of default

src/components/NcNoteCard/NcNoteCard.vue

@@ -30,34 +30,56 @@ available in four versions:
 When using an error type,
 
 ```vue
-<div>
-	<NcNoteCard type="warning">
-		<p>This is dangerous</p>
-	</NcNoteCard>
-
-	<NcNoteCard type="error" heading="Error">
-		<p>The server is not happy and reported the following error</p>
-	</NcNoteCard>
-
-	<NcNoteCard type="success">
-		<p>You won</p>
-	</NcNoteCard>
-
-	<NcNoteCard type="info">
-		<p>For your information</p>
-	</NcNoteCard>
-</div>
+<template>
+	<div>
+		<NcNoteCard type="warning">
+			<p>This is dangerous</p>
+		</NcNoteCard>
+
+		<NcNoteCard type="error" heading="Error">
+			<p>The server is not happy and reported the following error</p>
+		</NcNoteCard>
+
+		<NcNoteCard type="success">
+			<p>You won</p>
+		</NcNoteCard>
+
+		<NcNoteCard type="info">
+			<p>For your information</p>
+		</NcNoteCard>
+
+		<NcNoteCard type="warning">
+			<template #icon>
+				<Cog :size="20"/>
+			</template>
+			<p>Custom icon usage</p>
+		</NcNoteCard>
+	</div>
+</template>
+
+<script>
+	import Cog from 'vue-material-design-icons/Cog.vue'
+
+	export default {
+		components: {
+			Cog,
+		},
+	}
+</script>
 ```
 </docs>
 
 <template>
 	<div class="notecard"
 		:class="`notecard--${type}`"
 		:role="shouldShowAlert ? 'alert' : 'note'">
-		<component :is="icon"
-			class="notecard__icon"
-			:class="{'notecard__icon--heading': heading}"
-			:fill-color="color" />
+		<!-- @slot Manually provide icon -->
+		<slot name="icon">
+			<component :is="icon"
+				class="notecard__icon"
+				:class="{'notecard__icon--heading': heading}"
+				:fill-color="color" />
+		</slot>
 		<div>
 			<h2 v-if="heading">
 				{{ heading }}