fix build error from rollup-plugin-img and add additional img source prop to rounded card component

.changeset/heavy-socks-fold.md

@@ -0,0 +1,5 @@
+---
+"@learncard/react": patch
+---
+
+fix build error from rollup-plugin-img and add additional img source prop to rounded card component

packages/react-learn-card/rollup.config.js

@@ -34,7 +34,12 @@ export default [
             del({ targets: [packageJson.main, packageJson.module] }),
             json(),
             peerDepsExternal(),
-            image(),
+            image({
+                output: `dist/images`,
+                extensions: /\.(png|jpg|jpeg|gif|svg)$/, // support png|jpg|jpeg|gif|svg, and it's alse the default value
+                limit: 8192, // default 8192(8k)
+                exclude: 'node_modules/**',
+            }),
             svgr(),
             resolve(),
             commonjs(),

packages/react-learn-card/src/components/RoundedSquare/RoundedSquare.tsx

@@ -11,6 +11,7 @@ export type RoundedSquareProps = {
     description?: string;
     type?: string;
     iconSrc?: string;
+    imgSrc?: string;
     count?: string | number;
     onClick?: () => void;
     bgColor?: string;
@@ -20,12 +21,13 @@ export const RoundedSquare: React.FC<RoundedSquareProps> = ({
     title = 'Currencies',
     description = 'Lorem ipsum sit dalor amet',
     iconSrc = ICONS_TO_SOURCE[Icons.trophyIcon],
+    imgSrc,
     type = WALLET_SUBTYPES.ACHIEVEMENTS,
     count = '28',
     onClick = () => {},
     bgColor,
 }) => {
-    const imgSrc = TYPE_TO_IMG_SRC[type];
+    const imgSource = imgSrc || TYPE_TO_IMG_SRC[type];
     const backgroundColor = bgColor ?? `bg-${TYPE_TO_WALLET_COLOR[type]}`;
     const circleClass = `flex w-full justify-end icon-display absolute right-[15px] bottom-[10px] max-h-[40px] max-w-[40px]`;
 
@@ -46,7 +48,7 @@ export const RoundedSquare: React.FC<RoundedSquareProps> = ({
                 </section>
 
                 <div className="graphic-background relative flex justify-center">
-                    <img className="max-w-[130px]" src={imgSrc} />
+                    <img className="max-w-[130px]" src={imgSource} />
                 </div>
             </div>
 

packages/react-learn-card/src/components/RoundedSquare/constants.ts

@@ -1,8 +1,8 @@
-import coinsGraphic from '../../assets/images/wallet-currency.png';
-import idsGraphic from '../../assets/images/wallet-ids.png';
-import jobhistoryGraphic from '../../assets/images/wallet-jobhistory.png';
-import learningHistoryGraphic from '../../assets/images/wallet-learninghistory.png';
-import skillsGraphic from '../../assets/images/wallet-skills.png';
+import coinsGraphic from '../../assets/images/walletcurrency.png';
+import idsGraphic from '../../assets/images/walletids.png';
+import jobhistoryGraphic from '../../assets/images/walletjobhistory.png';
+import learningHistoryGraphic from '../../assets/images/walletlearninghistory.png';
+import skillsGraphic from '../../assets/images/walletskills.png';
 import achievementsGraphic from '../../assets/images/walletTrophy.png';
 
 export const WALLET_SUBTYPES = {

packages/react-learn-card/src/components/RoundedSquare/index.ts

@@ -3,3 +3,4 @@
  */
 
 export * from "./RoundedSquare";
+export * from "./constants";