💄 Rename arrow icons to chevron

Author: Frontendland

src/components/Accordion/Accordion.astro

@@ -1,7 +1,7 @@
 ---
 import type { AccordionProps } from './accordion'
 
-import ArrowDown from '../../icons/arrow-down.svg?raw'
+import ChevronDown from '../../icons/chevron-down.svg?raw'
 import Plus from '../../icons/plus.svg?raw'
 
 import styles from './accordion.module.scss'
@@ -32,7 +32,7 @@ const classes = [
             >
                 {item.title}
                 {icon !== 'none' && (
-                    <Fragment set:html={icon === 'plus' ? Plus : ArrowDown} />
+                    <Fragment set:html={icon === 'plus' ? Plus : ChevronDown} />
                 )}
             </button>
             <div class={styles.wrapper}>

src/components/Accordion/Accordion.svelte

@@ -3,7 +3,7 @@
 
     import { classNames } from '../../utils/classNames'
 
-    import ArrowDown from '../../icons/arrow-down.svg?raw'
+    import ChevronDown from '../../icons/chevron-down.svg?raw'
     import Plus from '../../icons/plus.svg?raw'
 
     import styles from './accordion.module.scss'
@@ -45,7 +45,7 @@
             >
                 {item.title}
                 {#if icon !== 'none'}
-                    {@html icon === 'plus' ? Plus : ArrowDown}
+                    {@html icon === 'plus' ? Plus : ChevronDown}
                 {/if}
             </button>
             <div class={styles.wrapper}>

src/components/Accordion/Accordion.tsx

@@ -3,7 +3,7 @@ import type { AccordionProps } from './accordion'
 
 import { classNames } from '../../utils/classNames'
 
-import ArrowDown from '../../icons/arrow-down.svg?raw'
+import ChevronDown from '../../icons/chevron-down.svg?raw'
 import Plus from '../../icons/plus.svg?raw'
 
 import styles from './accordion.module.scss'
@@ -43,7 +43,7 @@ const Accordion = ({
                         ])}
                         dangerouslySetInnerHTML={{ __html: icon === 'none'
                             ? item.title
-                            : `${item.title} ${icon === 'plus' ? Plus : ArrowDown}`
+                            : `${item.title} ${icon === 'plus' ? Plus : ChevronDown}`
                         }}
                     />
                     <div className={styles.wrapper}>

src/components/Breadcrumb/Breadcrumb.astro

@@ -43,7 +43,7 @@ const classes = [
         <Fragment>
             {index < items.length - 1 && (
                 <li>
-                    {separator || <Icon type="arrow-right" />}
+                    {separator || <Icon type="chevron-right" />}
                 </li>
             )}
         </Fragment>

src/components/Breadcrumb/Breadcrumb.svelte

@@ -5,7 +5,7 @@
 
     import { classNames } from '../../utils/classNames'
 
-    import ArrowRight from '../../icons/arrow-right.svg?raw'
+    import ChevronRight from '../../icons/chevron-right.svg?raw'
 
     import styles from './breadcrumb.module.scss'
 
@@ -40,7 +40,7 @@
         </li>
         {#if index < items.length - 1}
             <li>
-                {@html separator || ArrowRight}
+                {@html separator || ChevronRight}
             </li>
         {/if}
     {/each}

src/components/Breadcrumb/Breadcrumb.tsx

@@ -5,7 +5,7 @@ import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
 import { classNames } from '../../utils/classNames'
 
-import ArrowRight from '../../icons/arrow-right.svg?raw'
+import ChevronRight from '../../icons/chevron-right.svg?raw'
 
 import styles from './breadcrumb.module.scss'
 
@@ -38,7 +38,7 @@ const Breadcrumb = ({
                         <li>
                             {separator
                                 ? separator
-                                : <span dangerouslySetInnerHTML={{ __html: ArrowRight }} />
+                                : <span dangerouslySetInnerHTML={{ __html: ChevronRight }} />
                             }
                         </li>
                     )}

src/components/Icon/icon.ts

@@ -1,9 +1,10 @@
 export type IconProps = {
     type: 'alert'
-        | 'arrow-down'
-        | 'arrow-left'
-        | 'arrow-right'
         | 'check'
+        | 'chevron-down'
+        | 'chevron-left'
+        | 'chevron-right'
+        | 'chevron-up'
         | 'circle-check'
         | 'circle-close'
         | 'close'

src/components/Icon/map.ts

@@ -1,9 +1,9 @@
 import Alert from '../../icons/alert.svg?raw'
-import ArrowDown from '../../icons/arrow-down.svg?raw'
-import ArrowLeft from '../../icons/arrow-left.svg?raw'
-import ArrowRight from '../../icons/arrow-right.svg?raw'
-import ArrowUp from '../../icons/arrow-up.svg?raw'
 import Check from '../../icons/check.svg?raw'
+import ChevronDown from '../../icons/chevron-down.svg?raw'
+import ChevronLeft from '../../icons/chevron-left.svg?raw'
+import ChevronRight from '../../icons/chevron-right.svg?raw'
+import ChevronUp from '../../icons/chevron-up.svg?raw'
 import CircleCheck from '../../icons/circle-check.svg?raw'
 import CircleClose from '../../icons/circle-close.svg?raw'
 import Close from '../../icons/close.svg?raw'
@@ -20,11 +20,11 @@ import Warning from '../../icons/warning.svg?raw'
 
 const iconMap = {
     'alert': Alert,
-    'arrow-down': ArrowDown,
-    'arrow-left': ArrowLeft,
-    'arrow-right': ArrowRight,
-    'arrow-up': ArrowUp,
     'check': Check,
+    'chevron-down': ChevronDown,
+    'chevron-left': ChevronLeft,
+    'chevron-right': ChevronRight,
+    'chevron-up': ChevronUp,
     'circle-check': CircleCheck,
     'circle-close': CircleClose,
     'close': Close,

src/components/Pagination/Pagination.astro

@@ -3,8 +3,8 @@ import type { PaginationProps } from './pagination'
 
 import Button from '../Button/Button.astro'
 
-import ArrowLeft from '../../icons/arrow-left.svg?raw'
-import ArrowRight from '../../icons/arrow-right.svg?raw'
+import ChevronLeft from '../../icons/chevron-left.svg?raw'
+import ChevronRight from '../../icons/chevron-right.svg?raw'
 
 import styles from './pagination.module.scss'
 
@@ -76,7 +76,7 @@ const generatedPages = pages?.length
                 theme={theme}
                 data-page="prev"
             >
-                {(showChevrons || type === 'arrows') && <Fragment set:html={ArrowLeft} />}
+                {(showChevrons || type === 'arrows') && <Fragment set:html={ChevronLeft} />}
                 {type !== 'arrows' && previousPageLabel}
             </Button>
         </li>
@@ -109,7 +109,7 @@ const generatedPages = pages?.length
                 data-page="next"
             >
                 {type !== 'arrows' && nextPageLabel}
-                {(showChevrons || type === 'arrows') && <Fragment set:html={ArrowRight} />}
+                {(showChevrons || type === 'arrows') && <Fragment set:html={ChevronRight} />}
             </Button>
         </li>
     )}

src/components/Pagination/Pagination.svelte

@@ -5,8 +5,8 @@
 
     import { classNames } from '../../utils/classNames'
 
-    import ArrowLeft from '../../icons/arrow-left.svg?raw'
-    import ArrowRight from '../../icons/arrow-right.svg?raw'
+    import ChevronLeft from '../../icons/chevron-left.svg?raw'
+    import ChevronRight from '../../icons/chevron-right.svg?raw'
 
     import styles from './pagination.module.scss'
 
@@ -98,7 +98,7 @@
                 }
             >
                 {#if showChevrons || type === 'arrows'}
-                    {@html ArrowLeft}
+                    {@html ChevronLeft}
                 {/if}
                 {#if type !== 'arrows'}
                     {previousPageLabel}
@@ -143,7 +143,7 @@
                     {nextPageLabel}
                 {/if}
                 {#if showChevrons || type === 'arrows'}
-                    {@html ArrowRight}
+                    {@html ChevronRight}
                 {/if}
             </Button>
         </li>

src/components/Pagination/Pagination.tsx

@@ -5,8 +5,8 @@ import Button from '../Button/Button.tsx'
 
 import { classNames } from '../../utils/classNames'
 
-import ArrowLeft from '../../icons/arrow-left.svg?raw'
-import ArrowRight from '../../icons/arrow-right.svg?raw'
+import ChevronLeft from '../../icons/chevron-left.svg?raw'
+import ChevronRight from '../../icons/chevron-right.svg?raw'
 
 import styles from './pagination.module.scss'
 
@@ -111,7 +111,7 @@ const Pagination = ({
                             }
                         >
                             {(showChevrons || type === 'arrows') && (
-                                <span dangerouslySetInnerHTML={{ __html: ArrowLeft }} />
+                                <span dangerouslySetInnerHTML={{ __html: ChevronLeft }} />
                             )}
                             {type !== 'arrows' && previousPageLabel}
                         </Button>
@@ -152,7 +152,7 @@ const Pagination = ({
                         >
                             {type !== 'arrows' && nextPageLabel}
                             {(showChevrons || type === 'arrows') && (
-                                <span dangerouslySetInnerHTML={{ __html: ArrowRight }} />
+                                <span dangerouslySetInnerHTML={{ __html: ChevronRight }} />
                             )}
                         </Button>
                     </li>

src/components/Pagination/pagination.module.scss

@@ -35,6 +35,10 @@
     svg {
         @include size(10px);
         pointer-events: none;
+
+        path {
+            stroke-width: 3px;
+        }
     }
 
     [data-active] {

src/components/Select/Select.astro

@@ -8,7 +8,7 @@ import Popover from '../Popover/Popover.astro'
 
 import { classNames } from '../../utils/classNames'
 
-import ArrowDown from '../../icons/arrow-down.svg?raw'
+import ChevronDown from '../../icons/chevron-down.svg?raw'
 
 import styles from './select.module.scss'
 
@@ -56,7 +56,7 @@ const inputRestProps = Object.fromEntries(
     labelClassName={classes}
     {...inputRestProps}
 >
-    <Fragment set:html={ArrowDown} />
+    <Fragment set:html={ChevronDown} />
 </Input>
 {position === 'modal'
     ? (

src/components/Select/Select.svelte

@@ -13,7 +13,7 @@
     import { modal } from '../../utils/modal'
     import { closePopover, popover, type PopoverPosition } from '../../utils/popover'
 
-    import ArrowDown from '../../icons/arrow-down.svg?raw'
+    import ChevronDown from '../../icons/chevron-down.svg?raw'
 
     import styles from './select.module.scss'
 
@@ -156,7 +156,7 @@
     labelClassName={classes}
     {...inputRestProps}
 >
-    {@html ArrowDown}
+    {@html ChevronDown}
 </Input>
 {#if position === 'modal'}
     <Modal

src/components/Select/Select.tsx

@@ -12,7 +12,7 @@ import { on } from '../../utils/DOMUtils'
 import { modal } from '../../utils/modal'
 import { closePopover, popover, type PopoverPosition } from '../../utils/popover'
 
-import ArrowDown from '../../icons/arrow-down.svg?raw'
+import ChevronDown from '../../icons/chevron-down.svg?raw'
 
 import styles from './select.module.scss'
 
@@ -155,7 +155,7 @@ const Select = ({
                 {...inputRestProps}
             >
                 <span
-                    dangerouslySetInnerHTML={{ __html: ArrowDown }}
+                    dangerouslySetInnerHTML={{ __html: ChevronDown }}
                     style={{
                         right: 0,
                         pointerEvents: 'none'