♻️ refactored ArrowChevron

Co-authored-by: haraldnilsen <harald_998@hotmail.com>
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
Sindre Kjelsrud 2023-12-14 13:41:07 +01:00
parent 963ed36076
commit b5fb7711d6
Signed by untrusted user who does not match committer: sidski
GPG key ID: D2BBDF3EDE6BA9A6
2 changed files with 12 additions and 8 deletions

View file

@ -0,0 +1,12 @@
<script lang="ts">
export let width:string, direction:string;
// Define the paths for left and right arrows
const leftArrowPath = "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z";
const rightArrowPath = "M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z";
</script>
<!-- Render the appropriate SVG based on the direction -->
<svg xmlns="http://www.w3.org/2000/svg" height={width} width={width} viewBox="0 0 320 512">
<path d={direction === 'left' ? leftArrowPath : rightArrowPath} />
</svg>

View file

@ -1,8 +0,0 @@
<script lang="ts">
export let width:string
</script>
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
<svg xmlns="http://www.w3.org/2000/svg" height={width} width={width} viewBox="0 0 320 512">
<path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/>
</svg>