Skip to content

Commit 35f99ca

Browse files
rAskVALrAskVAL
committed
SD-17: Add icons
1 parent 29e2816 commit 35f99ca

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+836
-107
lines changed

‎package-lock.json‎

Lines changed: 373 additions & 105 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,16 @@
1212
"lint:styles": "stylelint '**/*.{tsx,ts,js}' --ignore-path .gitignore",
1313
"lint": "run-p lint:* -c",
1414
"lint-feature-branch-commits": "npx commitlint --from main --to HEAD --verbose",
15-
"test": "vitest"
15+
"test": "vitest",
16+
"generate-icons": "tsx scripts/generateIcons.ts"
1617
},
1718
"dependencies": {
1819
"react": "^19.0.0",
1920
"react-dom": "^19.0.0",
2021
"styled-components": "^6.1.15",
2122
"styled-reset": "^4.5.2",
2223
"usehooks-ts": "^3.1.1",
24+
"vite-plugin-svgr": "^4.3.0",
2325
"zustand": "^5.0.3"
2426
},
2527
"devDependencies": {
@@ -45,6 +47,7 @@
4547
"stylelint": "^16.15.0",
4648
"stylelint-config-standard": "^37.0.0",
4749
"stylelint-order": "^6.0.4",
50+
"tsx": "^4.19.3",
4851
"typescript": "~5.7.2",
4952
"typescript-eslint": "^8.24.1",
5053
"vite": "^6.2.0",

‎scripts/generateIcons.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import * as fs from 'fs';
2+
import * as path from 'path';
3+
import { fileURLToPath } from 'url';
4+
5+
const __filename = fileURLToPath(import.meta.url);
6+
const __dirname = path.dirname(__filename);
7+
const rootDir = path.resolve(__dirname, '..');
8+
const iconsDir = path.join(rootDir, 'src/domains/common/components/CIcon/icons');
9+
10+
if (!fs.existsSync(iconsDir)) {
11+
console.error(`Icons directory not found: ${iconsDir}`);
12+
console.error('Please ensure the icons directory exists and contains SVG files.');
13+
process.exit(1);
14+
}
15+
16+
try {
17+
const files = fs.readdirSync(iconsDir);
18+
19+
const iconNames = files
20+
.filter(file => file.endsWith('.svg'))
21+
.map(file => file.replace('.svg', ''));
22+
23+
const content = `/**
24+
* @fileoverview Icon definitions with SVG components
25+
* @generated This file is auto-generated using 'npm run generate-icons'
26+
* @warning Do not modify this file directly. Add or update SVG files in the icons directory and run the generator
27+
*/
28+
29+
${iconNames.map(name =>
30+
`import ${name.charAt(0).toUpperCase() + name.slice(1)} from './icons/${name}.svg?react';`
31+
).join('\n')}
32+
33+
export const icons = {
34+
${iconNames.map(name =>
35+
name.charAt(0).toUpperCase() + name.slice(1)
36+
).join(',\n ')},
37+
} as const;
38+
39+
export type IconName = keyof typeof icons;
40+
`;
41+
42+
fs.writeFileSync(
43+
path.join(rootDir, 'src/domains/common/components/CIcon/icons.ts'),
44+
content
45+
);
46+
47+
console.log('Icons file generated successfully!');
48+
} catch (error) {
49+
if (typeof error === 'object' && error !== null && 'message' in error) {
50+
console.error('Error generating icons file:', error.message);
51+
} else {
52+
console.error('An unknown error occurred.');
53+
}
54+
process.exit(1);
55+
}

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import styled from 'styled-components';
22

3+
import CIcon from 'src/domains/common/components/CIcon';
34
import { useTheme } from 'src/domains/common/hooks/useTheme';
45
import Providers from 'src/domains/common/providers/Providers';
56

@@ -16,6 +17,7 @@ const App = () => {
1617
Current theme:
1718
{' '}
1819
{userSelectedTheme}
20+
<CIcon icon="Shielded" size={32} />
1921
</Providers>
2022
);
2123
};

‎src/domains/common/components/CIcon/CIcon.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import styled from 'styled-components';
2+
3+
import { icons, IconName } from './icons';
4+
5+
type Size = number | `${string}%` | `${string}px`;
6+
7+
type Props = {
8+
icon: IconName,
9+
size?: Size,
10+
color?: string,
11+
strokeWidth?: number,
12+
className?: string,
13+
};
14+
15+
const CIcon = ({
16+
icon,
17+
size = 24,
18+
color,
19+
strokeWidth = 0,
20+
className,
21+
}: Props) => {
22+
const IconComponent = icons[icon];
23+
24+
return (
25+
<Icon
26+
as={IconComponent}
27+
$size={size}
28+
$color={color}
29+
$strokeWidth={strokeWidth}
30+
className={className}
31+
/>
32+
);
33+
};
34+
35+
export default CIcon;
36+
37+
const Icon = styled.div<{
38+
$size: Size,
39+
$color?: string,
40+
$strokeWidth: number,
41+
}>`
42+
height: ${({ $size }) => (typeof $size === 'number' ? `${$size}px` : $size)};
43+
width: ${({ $size }) => (typeof $size === 'number' ? `${$size}px` : $size)};
44+
color: ${({ $color }) => $color ?? 'currentcolor'};
45+
46+
flex-shrink: 0;
47+
48+
& * {
49+
fill: currentcolor;
50+
stroke: currentcolor;
51+
stroke-width: ${({ $strokeWidth }) => $strokeWidth};
52+
}
53+
`;

‎src/domains/common/components/CIcon/icons.ts‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
/**
2+
* @fileoverview Icon definitions with SVG components
3+
* @generated This file is auto-generated using 'npm run generate-icons'
4+
* @warning Do not modify this file directly. Add or update SVG files in the icons directory and run the generator
5+
*/
6+
7+
import Add from './icons/add.svg?react';
8+
import AddCircle from './icons/addCircle.svg?react';
9+
import AddSquare from './icons/addSquare.svg?react';
10+
import ArrowDown from './icons/arrowDown.svg?react';
11+
import ArrowDownLeft from './icons/arrowDownLeft.svg?react';
12+
import ArrowDownLeftRegular from './icons/arrowDownLeftRegular.svg?react';
13+
import ArrowDownload from './icons/arrowDownload.svg?react';
14+
import ArrowImport from './icons/arrowImport.svg?react';
15+
import ArrowRight from './icons/arrowRight.svg?react';
16+
import ArrowSort from './icons/arrowSort.svg?react';
17+
import ArrowUpRight from './icons/arrowUpRight.svg?react';
18+
import ArrowUpRightRegular from './icons/arrowUpRightRegular.svg?react';
19+
import Azero from './icons/azero.svg?react';
20+
import Calendar from './icons/calendar.svg?react';
21+
import ChatHelp from './icons/chatHelp.svg?react';
22+
import CheckmarkCircle from './icons/checkmarkCircle.svg?react';
23+
import CheckmarkRegular from './icons/checkmarkRegular.svg?react';
24+
import CheckmarkStarburst from './icons/checkmarkStarburst.svg?react';
25+
import ChevronDoubleDownRegular from './icons/chevronDoubleDownRegular.svg?react';
26+
import ChevronLeft from './icons/chevronLeft.svg?react';
27+
import ClipboardPaste from './icons/clipboardPaste.svg?react';
28+
import Common from './icons/common.svg?react';
29+
import CompassNorthWest from './icons/compassNorthWest.svg?react';
30+
import Copied from './icons/copied.svg?react';
31+
import Copy from './icons/copy.svg?react';
32+
import Dismiss from './icons/dismiss.svg?react';
33+
import DismissCircle from './icons/dismissCircle.svg?react';
34+
import DocumentRegular from './icons/documentRegular.svg?react';
35+
import DocumentText from './icons/documentText.svg?react';
36+
import Edit from './icons/edit.svg?react';
37+
import ErrorCircleFilled from './icons/errorCircleFilled.svg?react';
38+
import ErrorCircleRegular from './icons/errorCircleRegular.svg?react';
39+
import Eth from './icons/eth.svg?react';
40+
import Eye from './icons/eye.svg?react';
41+
import EyeOff from './icons/eyeOff.svg?react';
42+
import Globe from './icons/globe.svg?react';
43+
import History from './icons/history.svg?react';
44+
import Info from './icons/info.svg?react';
45+
import InfoRegular from './icons/infoRegular.svg?react';
46+
import IosArrowLeft from './icons/iosArrowLeft.svg?react';
47+
import Lock from './icons/lock.svg?react';
48+
import MoreVertical from './icons/moreVertical.svg?react';
49+
import Network from './icons/network.svg?react';
50+
import Open from './icons/open.svg?react';
51+
import PersonFeedback from './icons/personFeedback.svg?react';
52+
import PersonFilled from './icons/personFilled.svg?react';
53+
import QuestionCircle from './icons/questionCircle.svg?react';
54+
import Settings from './icons/settings.svg?react';
55+
import ShieldError from './icons/shieldError.svg?react';
56+
import ShieldRegular from './icons/shieldRegular.svg?react';
57+
import ShieldTask from './icons/shieldTask.svg?react';
58+
import Shielded from './icons/shielded.svg?react';
59+
import ShieldedFilled from './icons/shieldedFilled.svg?react';
60+
import SmartContractRegular from './icons/smartContractRegular.svg?react';
61+
import TelegramSM from './icons/telegramSM.svg?react';
62+
import Usdc from './icons/usdc.svg?react';
63+
import Usdt from './icons/usdt.svg?react';
64+
import WAzero from './icons/wAzero.svg?react';
65+
import WBtc from './icons/wBtc.svg?react';
66+
import WEth from './icons/wEth.svg?react';
67+
import Wallet from './icons/wallet.svg?react';
68+
import WarningRegular from './icons/warningRegular.svg?react';
69+
import XSM from './icons/xSM.svg?react';
70+
71+
export const icons = {
72+
Add,
73+
AddCircle,
74+
AddSquare,
75+
ArrowDown,
76+
ArrowDownLeft,
77+
ArrowDownLeftRegular,
78+
ArrowDownload,
79+
ArrowImport,
80+
ArrowRight,
81+
ArrowSort,
82+
ArrowUpRight,
83+
ArrowUpRightRegular,
84+
Azero,
85+
Calendar,
86+
ChatHelp,
87+
CheckmarkCircle,
88+
CheckmarkRegular,
89+
CheckmarkStarburst,
90+
ChevronDoubleDownRegular,
91+
ChevronLeft,
92+
ClipboardPaste,
93+
Common,
94+
CompassNorthWest,
95+
Copied,
96+
Copy,
97+
Dismiss,
98+
DismissCircle,
99+
DocumentRegular,
100+
DocumentText,
101+
Edit,
102+
ErrorCircleFilled,
103+
ErrorCircleRegular,
104+
Eth,
105+
Eye,
106+
EyeOff,
107+
Globe,
108+
History,
109+
Info,
110+
InfoRegular,
111+
IosArrowLeft,
112+
Lock,
113+
MoreVertical,
114+
Network,
115+
Open,
116+
PersonFeedback,
117+
PersonFilled,
118+
QuestionCircle,
119+
Settings,
120+
ShieldError,
121+
ShieldRegular,
122+
ShieldTask,
123+
Shielded,
124+
ShieldedFilled,
125+
SmartContractRegular,
126+
TelegramSM,
127+
Usdc,
128+
Usdt,
129+
WAzero,
130+
WBtc,
131+
WEth,
132+
Wallet,
133+
WarningRegular,
134+
XSM,
135+
} as const;
136+
137+
export type IconName = keyof typeof icons;

‎src/domains/common/components/CIcon/icons/add.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/domains/common/components/CIcon/icons/addCircle.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/domains/common/components/CIcon/icons/addSquare.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/domains/common/components/CIcon/icons/arrowDown.svg‎

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)