fix: icons export

expenseapp-io · Dec 8, 2023 · 07190bb · 07190bb
1 parent bc74d3e
commit 07190bb
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 22 deletions.
diff --git a/src/icons/ArrowDown.svg → src/icons/ArrowDownIcon.svg b/src/icons/ArrowDown.svg → src/icons/ArrowDownIcon.svg
diff --git a/src/icons/ArrowUp.svg → src/icons/ArrowUpIcon.svg b/src/icons/ArrowUp.svg → src/icons/ArrowUpIcon.svg
diff --git a/src/icons/MoreVertical.svg → src/icons/MoreVerticalIcon.svg b/src/icons/MoreVertical.svg → src/icons/MoreVerticalIcon.svg
diff --git a/src/icons/VerticalDragAndDrop.svg → src/icons/VerticalDragAndDropIcon.svg b/src/icons/VerticalDragAndDrop.svg → src/icons/VerticalDragAndDropIcon.svg
diff --git a/src/icons/index.ts b/src/icons/index.ts
@@ -1,6 +1,12 @@
+export { default as AlertIcon } from "./AlertIcon.svg";
+export { default as ArrowDownIcon } from "./ArrowDownIcon.svg";
+export { default as ArrowUpIcon } from "./ArrowUpIcon.svg";
 export { default as CalendarIcon } from "./CalendarIcon.svg";
 export { default as CaretLeftIcon } from "./CaretLeftIcon.svg";
 export { default as CaretRightIcon } from "./CaretRightIcon.svg";
 export { default as CaretUpDownIcon } from "./CaretUpDownIcon.svg";
 export { default as CheckIcon } from "./CheckIcon.svg";
+export { default as MoreVerticalIcon } from "./MoreVerticalIcon.svg";
+export { default as PlusIcon } from "./PlusIcon.svg";
+export { default as VerticalDragAndDropIcon } from "./VerticalDragAndDropIcon.svg";
 export { default as XIcon } from "./XIcon.svg";
diff --git a/src/stories/components/Card.mdx b/src/stories/components/Card.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/blocks";
 import { UnstyledWithTheme } from "../../components/UnstyledWithTheme";
-import MoreVertical from '../../icons/MoreVertical.svg'
+import MoreVerticalIcon from '../../icons/MoreVerticalIcon.svg'
 
 <Meta title="Components/Card" />
 
@@ -20,7 +20,7 @@ import MoreVertical from '../../icons/MoreVertical.svg'
         <p className="card-information-secondary">Food</p>
       </div>
       <button type="button" className="icon-button">
-        <MoreVertical />
+        <MoreVerticalIcon />
       </button>
     </li>
     <li className="card">
@@ -30,7 +30,7 @@ import MoreVertical from '../../icons/MoreVertical.svg'
         <p className="card-information-secondary">A cheapest flight between Monaco - Norway - Turkey - New York for a week</p>
       </div>
       <button type="button" className="icon-button">
-        <MoreVertical />
+        <MoreVerticalIcon />
       </button>
     </li>
     <div className="card-section">
@@ -42,7 +42,7 @@ import MoreVertical from '../../icons/MoreVertical.svg'
         <p className="card-information-primary">48 USD</p>
       </div>
       <button type="button" className="icon-button">
-        <MoreVertical />
+        <MoreVerticalIcon />
       </button>
     </li>
   </ul>
@@ -58,7 +58,7 @@ import MoreVertical from '../../icons/MoreVertical.svg'
         <p className="card-information-primary">Food</p>
       </div>
       <button type="button" className="icon-button">
-        <MoreVertical />
+        <MoreVerticalIcon />
       </button>
     </li>
     <li className="card">
@@ -67,7 +67,7 @@ import MoreVertical from '../../icons/MoreVertical.svg'
         <p className="card-information-primary">Travel</p>
       </div>
       <button type="button" className="icon-button">
-        <MoreVertical />
+        <MoreVerticalIcon />
       </button>
     </li>
     <li className="card">
@@ -76,7 +76,7 @@ import MoreVertical from '../../icons/MoreVertical.svg'
         <p className="card-information-primary">Tennis</p>
       </div>
       <button type="button" className="icon-button">
-        <MoreVertical />
+        <MoreVerticalIcon />
       </button>
     </li>
     <li className="card">
@@ -85,7 +85,7 @@ import MoreVertical from '../../icons/MoreVertical.svg'
         <p className="card-information-primary">Government</p>
       </div>
       <button type="button" className="icon-button">
-        <MoreVertical />
+        <MoreVerticalIcon />
       </button>
     </li>
   </ul>

diff --git a/src/stories/components/MonthlyReport.mdx b/src/stories/components/MonthlyReport.mdx
@@ -1,7 +1,7 @@
 import { Meta } from "@storybook/blocks";
 import { UnstyledWithTheme } from "../../components/UnstyledWithTheme";
-import ArrowUp from '../../icons/ArrowUp.svg';
-import ArrowDown from '../../icons/ArrowDown.svg';
+import ArrowUpIcon from '../../icons/ArrowUpIcon.svg';
+import ArrowDownIcon from '../../icons/ArrowDownIcon.svg';
 
 <Meta title="Components/MonthlyReport" />
 
@@ -90,7 +90,7 @@ The component is used to show monthly report for expenses by categories, as well
           </div>
           <button type="button" className="button button-secondary">
             <span>Less Details</span>
-            <ArrowUp />
+            <ArrowUpIcon />
           </button>
         </div>
       </div>
@@ -116,7 +116,7 @@ The component is used to show monthly report for expenses by categories, as well
       <div className="monthly-report-expanded-container">
         <button type="button" className="button button-secondary">
           <span>More Details</span>
-          <ArrowDown />
+          <ArrowDownIcon />
         </button>
       </div>
     </div>

diff --git a/src/stories/components/Widget.mdx b/src/stories/components/Widget.mdx
@@ -2,10 +2,10 @@ import { Meta } from "@storybook/blocks";
 import { UnstyledWithTheme } from "../../components/UnstyledWithTheme";
 import PlusIcon from '../../icons/PlusIcon.svg'
 import AlertIcon from '../../icons/AlertIcon.svg';
-import MoreVertical from '../../icons/MoreVertical.svg';
+import MoreVerticalIcon from '../../icons/MoreVerticalIcon.svg';
 import CheckIcon from '../../icons/CheckIcon.svg';
-import ArrowDown from '../../icons/ArrowDown.svg';
-import ArrowUp from '../../icons/ArrowUp.svg';
+import ArrowDownIcon from '../../icons/ArrowDownIcon.svg';
+import ArrowUpIcon from '../../icons/ArrowUpIcon.svg';
 
 <Meta title="Components/Widget" />
 
@@ -43,7 +43,7 @@ Shows a list of limits by each category, as well as progress and additional info
               </div>
             </div>
             <button type="button" className="icon-button">
-              <ArrowUp />
+              <ArrowUpIcon />
             </button>
           </div>
           <div className="budget-additional-list-container">
@@ -75,7 +75,7 @@ Shows a list of limits by each category, as well as progress and additional info
             </div>
           </div>
           <button type="button" className="icon-button">
-            <ArrowDown />
+            <ArrowDownIcon />
           </button>
         </li>
         <li className="budget">
@@ -95,7 +95,7 @@ Shows a list of limits by each category, as well as progress and additional info
             </div>
           </div>
           <button type="button" className="icon-button">
-            <ArrowDown />
+            <ArrowDownIcon />
           </button>
         </li>
       </ul>
@@ -127,7 +127,7 @@ Shows a list of user's subscriptions
             <div className="subscription-information-amount">120 USD</div>
           </div>
           <button type="button" className="icon-button">
-            <MoreVertical />
+            <MoreVerticalIcon />
           </button>
         </li>
         <li className="subscription">
@@ -140,7 +140,7 @@ Shows a list of user's subscriptions
             <div className="subscription-information-amount">120 USD</div>
           </div>
           <button type="button" className="icon-button">
-            <MoreVertical />
+            <MoreVerticalIcon />
           </button>
         </li>
       </div>
@@ -226,7 +226,7 @@ Use the aler message to notify users that they need more money based on their ex
             <div className="subscription-information-amount">120 USD</div>
           </div>
           <button type="button" className="icon-button">
-            <MoreVertical />
+            <MoreVerticalIcon />
           </button>
         </li>
         <li className="subscription">
@@ -239,7 +239,7 @@ Use the aler message to notify users that they need more money based on their ex
             <div className="subscription-information-amount">120 USD</div>
           </div>
           <button type="button" className="icon-button">
-            <MoreVertical />
+            <MoreVerticalIcon />
           </button>
         </li>
       </div>