[@svelteui/core]: remove radix-icons-svelte usage from FileUpload component

Author: BeeMargarida

packages/svelteui-core/src/components/Burger/Burger.stories.svelte

@@ -3,7 +3,7 @@
 	import { Burger } from './index';
 	import { Button } from '../Button';
 
-    let opened = false;
+	let opened = false;
 </script>
 
 <Meta title="Components/Burger" component={Burger} />
@@ -15,8 +15,8 @@
 <Story name="Burger" id="burger" />
 
 <Story name="Burger inside a button" id="burgerButton">
-    <Button ripple variant="default" color="black" on:click={() => (opened = !opened)}>
-        <Burger {opened} size="sm" />
-        Menu
-    </Button>
-</Story>
+	<Button ripple variant="default" color="black" on:click={() => (opened = !opened)}>
+		<Burger {opened} size="sm" />
+		Menu
+	</Button>
+</Story>

packages/svelteui-core/src/components/FileUpload/FileUpload.d.ts

@@ -20,10 +20,12 @@ export interface FileUploadProps<T = 'drag'>
 	color?: SvelteUIColor;
 	size?: SvelteUINumberSize;
 	disabled?: boolean;
-	icon?: Component | HTMLOrSVGElement;
 	id?: string;
-	resetLabel?: string;
+	icon?: Component | HTMLOrSVGElement;
+	fileIcon?: Component | HTMLOrSVGElement;
+	removeIcon?: Component | HTMLOrSVGElement;
 	reset?: boolean;
+	resetLabel?: string;
 	resetColor?: SvelteUIColor;
 	resetIcon?: Component | HTMLOrSVGElement;
 	preview?: boolean;

packages/svelteui-core/src/components/FileUpload/FileUpload.stories.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Meta, Story, Template } from '@storybook/addon-svelte-csf';
-	import { Download, Trash } from 'radix-icons-svelte';
+	import { File, Reset, Download, Trash, Upload } from 'radix-icons-svelte';
 	import Button from '../Button/Button.svelte';
 	import IconRenderer from '../IconRenderer/IconRenderer.svelte';
 	import { Text } from '../Text';
@@ -25,15 +25,24 @@
 
 <Template let:args>
 	<div style="width: 500px;">
-		<FileUpload {...args} />
+		<FileUpload {...args} icon={Upload} fileIcon={File} removeIcon={Trash} resetIcon={Reset} />
 	</div>
 </Template>
 
 <Story name="FileUpload" />
 
 <Story name="Drop">
 	<div style="width: 500px;">
-		<FileUpload type="drag" multiple={true} size={'md'} on:selected={handleSelected}>
+		<FileUpload
+			type="drag"
+			multiple={true}
+			size={'md'}
+			icon={Upload}
+			fileIcon={File}
+			removeIcon={Trash}
+			resetIcon={Reset}
+			on:selected={handleSelected}
+		>
 			<IconRenderer iconSize={48} icon={Download} />
 			<Text align="center" weight={'semibold'}>Click or drag file to this area to FileUpload</Text>
 			<Text align="center" size="sm" color="dimmed">
@@ -46,19 +55,55 @@
 
 <Story name="Size">
 	<div style="width: 500px;">
-		<FileUpload size="lg" reset={true} />
+		<FileUpload
+			size="lg"
+			reset={true}
+			icon={Upload}
+			fileIcon={File}
+			removeIcon={Trash}
+			resetIcon={Reset}
+		/>
 		<br />
-		<FileUpload size="md" reset={true} />
+		<FileUpload
+			size="md"
+			reset={true}
+			icon={Upload}
+			fileIcon={File}
+			removeIcon={Trash}
+			resetIcon={Reset}
+		/>
 		<br />
-		<FileUpload size="sm" reset={true} />
+		<FileUpload
+			size="sm"
+			reset={true}
+			icon={Upload}
+			fileIcon={File}
+			removeIcon={Trash}
+			resetIcon={Reset}
+		/>
 		<br />
-		<FileUpload size="xs" reset={true} />
+		<FileUpload
+			size="xs"
+			reset={true}
+			icon={Upload}
+			fileIcon={File}
+			removeIcon={Trash}
+			resetIcon={Reset}
+		/>
 	</div>
 </Story>
 
 <Story name="Accept">
 	<div style="width: 500px;">
-		<FileUpload size="md" reset={true} accept="image/png,image/jpeg" />
+		<FileUpload
+			size="md"
+			reset={true}
+			accept="image/png,image/jpeg"
+			icon={Upload}
+			fileIcon={File}
+			removeIcon={Trash}
+			resetIcon={Reset}
+		/>
 	</div>
 </Story>
 
@@ -71,6 +116,10 @@
 			bind:files
 			reset={true}
 			preview={false}
+			icon={Upload}
+			fileIcon={File}
+			removeIcon={Trash}
+			resetIcon={Reset}
 		/>
 
 		<ul style="list-style: none;padding: 0;">

packages/svelteui-core/src/components/FileUpload/FileUpload.svelte

@@ -13,7 +13,6 @@
 	import { createEventForwarder, useActions } from '$lib/internal';
 	import { createEventDispatcher, get_current_component } from 'svelte/internal';
 	import { randomID } from '$lib/styles';
-	import { File, Reset, Trash, Upload } from 'radix-icons-svelte';
 	import IconRenderer from '../IconRenderer/IconRenderer.svelte';
 	import Button from '../Button/Button.svelte';
 	interface $$Props extends $$FileUploadProps {}
@@ -32,12 +31,14 @@
 		color: $$Props['color'] = 'blue',
 		size: $$Props['size'] = 'sm',
 		disabled: $$Props['disabled'] = false,
-		icon: $$Props['icon'] = Upload,
 		id: $$Props['id'] = randomID(),
+		icon: $$Props['icon'] = undefined,
+		fileIcon: $$Props['fileIcon'] = undefined,
+		removeIcon: $$Props['removeIcon'] = undefined,
 		reset: $$Props['reset'] = true,
 		resetLabel: $$Props['resetLabel'] = 'Reset',
 		resetColor: $$Props['resetColor'] = 'red',
-		resetIcon: $$Props['resetIcon'] = Reset,
+		resetIcon: $$Props['resetIcon'] = undefined,
 		preview: $$Props['preview'] = true;
 	export { className as class };
 
@@ -146,15 +147,15 @@
 	{#each files as { file }, i}
 		<div class={classes.fileItemWrapper}>
 			<div class={classes.fileItemIcon}>
-				<IconRenderer iconSize={fontSizes[size] * 1.8} icon={File} />
+				<IconRenderer iconSize={fontSizes[size] * 1.8} icon={fileIcon} />
 			</div>
 			<span class={classes.fileItemName}>
 				{file.name}
 			</span>
 			<span class={classes.fileItemAction}>
 				<span>
 					<Button variant="default" {size} on:click={() => remove(i)}>
-						<IconRenderer iconSize={fontSizes[size] * 1.5} icon={Trash} />
+						<IconRenderer iconSize={fontSizes[size] * 1.5} icon={removeIcon} />
 					</Button>
 				</span>
 			</span>