Repository: RootstockCollective/dao-frontend
Pull request #757: Convert react-icons to components - 6
Author: login: cybervoid0
Created: 2025-03-03T20:37:43Z | Merged: 2025-03-07T18:23:34Z

# What 

This PR is dependent on the earlier [PR-742](https://github.com/RootstockCollective/dao-frontend/pull/742)

Convert Icon components:

- TbArrowsSort
- TbSortAscending
- TbSortDescending

# Why

Requested by [the ticket](https://rsklabs.atlassian.net/browse/DAO-1099)


Diff:
diff --git a/src/components/Icons/ArrowsSortIcon.tsx b/src/components/Icons/ArrowsSortIcon.tsx
new file mode 100644
index 0000000000..dacc0e7128
--- /dev/null
+++ b/src/components/Icons/ArrowsSortIcon.tsx
@@ -0,0 +1,30 @@
+import { DEFAULT_ICON_COLOR } from './constants'
+import { IconProps } from './types'
+
+export function ArrowsSortIcon({
+  'aria-label': ariaLabel = 'Arrows Sort Icon',
+  size = 16,
+  fill = 'none',
+  stroke = DEFAULT_ICON_COLOR,
+  strokeWidth = 2,
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill={fill}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label={ariaLabel}
+      {...props}
+    >
+      <path d="M3 9l4 -4l4 4m-4 -4v14" />
+      <path d="M21 15l-4 4l-4 -4m4 4v-14" />
+    </svg>
+  )
+}
diff --git a/src/components/Icons/Icons.stories.tsx b/src/components/Icons/Icons.stories.tsx
index 87c893790a..73e0f3011d 100644
--- a/src/components/Icons/Icons.stories.tsx
+++ b/src/components/Icons/Icons.stories.tsx
@@ -5,6 +5,9 @@ import {
   CircleIcon,
   ArrowUpSFillIcon,
   ArrowDownSFillIcon,
+  ArrowsSortIcon,
+  SortAscendingIcon,
+  SortDescendingIcon,
   BitcoinIcon,
   PowerOffIcon,
   SearchIcon,
@@ -64,6 +67,18 @@ const IconsShowcase = (args: IconProps) => (
       <h4>Arrow Down S Fill</h4>
       <ArrowDownSFillIcon {...args} />
     </div>
+    <div>
+      <h4>Arrows Sort</h4>
+      <ArrowsSortIcon {...args} />
+    </div>
+    <div>
+      <h4>Sort Ascending</h4>
+      <SortAscendingIcon {...args} />
+    </div>
+    <div>
+      <h4>Sort Descending</h4>
+      <SortDescendingIcon {...args} />
+    </div>
     <div>
       <h4>Bitcoin</h4>
       <BitcoinIcon {...args} />
@@ -157,5 +172,6 @@ export const CustomSizeAndColor: Story = {
   args: {
     size: 48,
     fill: '#FF6347', // Tomato color
+    stroke: '#FF6347',
   },
 }
diff --git a/src/components/Icons/SortAscendingIcon.tsx b/src/components/Icons/SortAscendingIcon.tsx
new file mode 100644
index 0000000000..9c8c1a0fe5
--- /dev/null
+++ b/src/components/Icons/SortAscendingIcon.tsx
@@ -0,0 +1,33 @@
+import { DEFAULT_ICON_COLOR } from './constants'
+import { IconProps } from './types'
+
+export function SortAscendingIcon({
+  'aria-label': ariaLabel = 'Sort Ascending Icon',
+  size = 16,
+  fill = 'none',
+  stroke = DEFAULT_ICON_COLOR,
+  strokeWidth = 2,
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill={fill}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label={ariaLabel}
+      {...props}
+    >
+      <path d="M4 6l7 0" />
+      <path d="M4 12l7 0" />
+      <path d="M4 18l9 0" />
+      <path d="M15 9l3 -3l3 3" />
+      <path d="M18 6l0 12" />
+    </svg>
+  )
+}
diff --git a/src/components/Icons/SortDescendingIcon.tsx b/src/components/Icons/SortDescendingIcon.tsx
new file mode 100644
index 0000000000..4ea969a16d
--- /dev/null
+++ b/src/components/Icons/SortDescendingIcon.tsx
@@ -0,0 +1,33 @@
+import { DEFAULT_ICON_COLOR } from './constants'
+import { IconProps } from './types'
+
+export function SortDescendingIcon({
+  'aria-label': ariaLabel = 'Sort Descending Icon',
+  size = 16,
+  fill = 'none',
+  stroke = DEFAULT_ICON_COLOR,
+  strokeWidth = 2,
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label={ariaLabel}
+      {...props}
+    >
+      <path d="M4 6l9 0" />
+      <path d="M4 12l7 0" />
+      <path d="M4 18l7 0" />
+      <path d="M15 15l3 3l3 -3" />
+      <path d="M18 6l0 12" />
+    </svg>
+  )
+}
diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts
index c67609c330..dd66f0acf7 100644
--- a/src/components/Icons/index.ts
+++ b/src/components/Icons/index.ts
@@ -3,6 +3,9 @@ export { ArrowUpIcon } from './ArrowUpIcon'
 export { CircleIcon } from './CircleIcon'
 export { ArrowUpSFillIcon } from './ArrowUpSFillIcon'
 export { ArrowDownSFillIcon } from './ArrowDownSFillIcon'
+export { ArrowsSortIcon } from './ArrowsSortIcon'
+export { SortAscendingIcon } from './SortAscendingIcon'
+export { SortDescendingIcon } from './SortDescendingIcon'
 export { BitcoinIcon } from './BitcoinIcon'
 export { PowerOffIcon } from './PowerOffIcon'
 export { XCircleIcon } from './XCircleIcon'
diff --git a/src/components/Table/components/SortIndicator.tsx b/src/components/Table/components/SortIndicator.tsx
index 1c478900cc..d08e1c23fc 100644
--- a/src/components/Table/components/SortIndicator.tsx
+++ b/src/components/Table/components/SortIndicator.tsx
@@ -1,6 +1,6 @@
 import { type SortDirection } from '@tanstack/react-table'
 import { type PropsWithChildren } from 'react'
-import { TbArrowsSort, TbSortAscending, TbSortDescending } from 'react-icons/tb'
+import { ArrowsSortIcon, SortAscendingIcon, SortDescendingIcon } from '@/components/Icons'
 import { cn } from '@/lib/utils'
 
 interface SortIndicatorProps extends PropsWithChildren {
@@ -14,11 +14,11 @@ export function SortIndicator({ children, sortDirection, sortEnabled = true }: S
       {sortEnabled && (
         <div className="flex items-center">
           {sortDirection === 'asc' ? (
-            <TbSortAscending />
+            <SortAscendingIcon />
           ) : sortDirection === 'desc' ? (
-            <TbSortDescending />
+            <SortDescendingIcon />
           ) : (
-            <TbArrowsSort className="text-gray-500" />
+            <ArrowsSortIcon className="text-gray-500" />
           )}
         </div>
       )}


Reviews:
user: login: TravellerOnTheRun
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-04T11:29:37Z
user: login: cybervoid0
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-06T14:51:07Z
user: login: Freshenext
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-03-06T19:49:13Z
user: login: TravellerOnTheRun
body: I am approving with a TODO: make sure that if you create a convention, follow it. If you set DEFAULT_ICON_SIZE as default icon size, keep using it and adjust according to the needs when it needs to be smaller at the use case level.
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T18:21:41Z

Review comments:
diff_hunk: @@ -0,0 +1,33 @@
+import { DEFAULT_ICON_COLOR } from './constants'
+import { IconProps } from './types'
+
+export function SortDescendingIcon({
+  'aria-label': ariaLabel = 'Sort Descending Icon',
+  size = 16,
path: src/components/Icons/SortDescendingIcon.tsx
user: login: TravellerOnTheRun
body: Let's keep it as `DEFAULT_ICON_SIZE` and change to 16 where we need to align with other icons
created_at: 2025-03-04T11:29:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,33 @@
+import { DEFAULT_ICON_COLOR } from './constants'
+import { IconProps } from './types'
+
+export function SortDescendingIcon({
+  'aria-label': ariaLabel = 'Sort Descending Icon',
+  size = 16,
path: src/components/Icons/SortDescendingIcon.tsx
user: login: cybervoid0
body: here is the case where it's needed to be smaller
created_at: 2025-03-06T14:51:07Z
author_association: CONTRIBUTOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-03-03T20:37:59Z
body: <h1>Dependency Review</h1>
✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.<h2>OpenSSF Scorecard</h2>
<table><tr><th>Package</th><th>Version</th><th>Score</th><th>Details</th></tr>
</table><h2>Scanned Files</h2>
<ul>


<!-- dependency-review-pr-comment-marker -->
author_association: NONE
user: login: cybervoid0
created_at: 2025-03-07T18:35:34Z
body: I already said, this component is different from the default one. It can’t take the default value because it’s larger than the others. If I leave it as default, it will be huge. Do you think I’m doing this on a whim? Here's nothing to leave for TODO. It's done
author_association: CONTRIBUTOR