fix(Carousel): removed dependency on material icons

fix(icons): added arrow_back and arrow_forward docs(index): fixed arrow_forward import
N00nDay · Oct 18, 2022 · 271f6a1 · 271f6a1
1 parent 95e6d28
commit 271f6a1
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 9 deletions.
diff --git a/src/docs/icons.ts b/src/docs/icons.ts
@@ -16,8 +16,6 @@ export const send =
 	'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M2,21L23,12L2,3V10L17,12L2,14V21Z" /></svg>';
 export const trash =
 	'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" /></svg>';
-export const arrow_right =
-	'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" /></svg>';
 export const toggle_switch =
 	'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z" /></svg>';
 export const format_list_numbered =

diff --git a/src/lib/components/carousel/Carousel.svelte b/src/lib/components/carousel/Carousel.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import type { CarouselSlide } from '../../types';
+	import Icon from '../icon/Icon.svelte';
+	import { arrow_back, arrow_forward } from '../../icons';
 
 	export let slides: CarouselSlide[] = [];
 	export let activeSlide = 0;
@@ -62,9 +64,9 @@
 		type="button"
 	>
 		<div
-			class="flex items-center justify-center h-12 w-12 bg-white bg-opacity-10 rounded-full transition-reveal scale-90 group-hover:scale-100 group-hover:bg-opacity-20 group-hover:active:scale-95"
+			class="flex items-center justify-center h-12 w-12 text-dark-content bg-white bg-opacity-10 rounded-full transition-reveal scale-90 group-hover:scale-100 group-hover:bg-opacity-20 group-hover:active:scale-95"
 		>
-			<span class="material-icons text-3xl text-dark-content"> arrow_back </span>
+			<Icon data={arrow_back} />
 			<span class="sr-only">Previous</span>
 		</div>
 	</button>
@@ -75,9 +77,9 @@
 		type="button"
 	>
 		<div
-			class="flex items-center justify-center h-14 w-14 bg-white bg-opacity-10 rounded-full transition-reveal scale-90 group-hover:scale-100 group-hover:bg-opacity-20 group-hover:active:scale-95"
+			class="flex items-center justify-center h-12 w-12 text-dark-content bg-white bg-opacity-10 rounded-full transition-reveal scale-90 group-hover:scale-100 group-hover:bg-opacity-20 group-hover:active:scale-95"
 		>
-			<span class="material-icons text-3xl text-dark-content"> arrow_forward </span>
+			<Icon data={arrow_forward} />
 			<span class="sr-only">Next</span>
 		</div>
 	</button>

diff --git a/src/lib/icons.ts b/src/lib/icons.ts
@@ -24,3 +24,7 @@ export const info =
 	'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>';
 export const clear =
 	'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" /></svg>';
+export const arrow_back =
+	'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" /></svg>';
+export const arrow_forward =
+	'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" /></svg>';
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -18,8 +18,8 @@
 	} from '../lib';
 	import { formatDate, formatNumber } from '../lib/utils';
 	import type { CarouselSlide, LightboxAction } from '../lib/types';
-	import { arrow_right, home, send, trash } from '../docs/icons';
-	import { close } from '../lib/icons';
+	import { home, send, trash } from '../docs/icons';
+	import { close, arrow_forward } from '../lib/icons';
 
 	const items = [
 		{
@@ -112,7 +112,7 @@
 				</p>
 				<Button ariaLabel="get started" class="mt-4" type="primary" on:click={handleGetStarted}
 					>Get Started
-					<Icon slot="trailing" data={arrow_right} let:size {size} />
+					<Icon slot="trailing" data={arrow_forward} let:size {size} />
 				</Button>
 			</div>
 		</Col>