Skip to content

Commit 38a868a

Browse files
ohprettyhakohprettyhak
committed
feat: add multiple icon components and update index exports
1 parent bf40598 commit 38a868a

30 files changed

+931
-2
lines changed

‎apps/spectator/src/components/layout/header.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { HCCLogo } from '@hcc/icons';
22
import Link from 'next/link';
3+
import { ROUTES } from '~/constants/routes';
34

45
export const Header = () => {
56
return (
6-
<header className="center sticky top-0 z-header h-[44px] w-full border-neutral-100 border-b">
7-
<Link href="/">
7+
<header className="sticky top-0 z-header row-between h-[44px] w-full border-neutral-100 border-b px-5">
8+
<Link href={ROUTES.HOME}>
89
<HCCLogo width="71.5" height="21" className="text-primary-500" />
910
</Link>
1011
</header>

‎apps/spectator/src/constants/routes.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const ROUTES = {
2+
HOME: '/',
3+
};

‎packages/icons/build.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,40 @@
11
import esbuild from 'esbuild';
2+
import fs from 'fs';
3+
import path from 'path';
24
import pkg from './package.json' with { type: 'json' };
35

6+
function generateIndexFiles() {
7+
const componentsDir = './src/components';
8+
const subdirs = ['brand', 'semantic'];
9+
10+
subdirs.forEach(subdir => {
11+
const subdirPath = path.join(componentsDir, subdir);
12+
const indexPath = path.join(subdirPath, 'index.ts');
13+
14+
if (!fs.existsSync(subdirPath)) {
15+
console.log(`Directory ${subdirPath} does not exist, skipping...`);
16+
return;
17+
}
18+
19+
const files = fs
20+
.readdirSync(subdirPath)
21+
.filter(file => file.endsWith('.tsx'))
22+
.map(file => file.replace('.tsx', ''));
23+
24+
if (files.length === 0) {
25+
console.log(`No .tsx files found in ${subdirPath}`);
26+
return;
27+
}
28+
29+
const exportStatements = files.map(file => `export * from './${file}';`).join('\n');
30+
fs.writeFileSync(indexPath, exportStatements);
31+
32+
console.log(`Generated ${indexPath} with ${files.length} exports:`, files);
33+
});
34+
}
35+
36+
generateIndexFiles();
37+
438
const sharedConfig = {
539
entryPoints: ['./src/index.ts'],
640
bundle: true,

‎packages/icons/src/components/semantic/AddCircleIcon.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import Icon from '../../icon';
2+
import type { IconProps } from '../../types';
3+
4+
export const AddCircleIcon = (props: IconProps) => (
5+
<Icon {...props}>
6+
<svg
7+
width="24"
8+
height="24"
9+
viewBox="0 0 24 24"
10+
fill="none"
11+
xmlns="http://www.w3.org/2000/svg"
12+
aria-hidden="true"
13+
>
14+
<mask
15+
id="mask0_7258_2736"
16+
style={{ maskType: 'alpha' }}
17+
maskUnits="userSpaceOnUse"
18+
x="0"
19+
y="0"
20+
width="24"
21+
height="24"
22+
>
23+
<rect width="24" height="24" fill="currentColor" />
24+
</mask>
25+
<g mask="url(#mask0_7258_2736)">
26+
<path
27+
d="M11 17H13V13H17V11H13V7H11V11H7V13H11V17ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z"
28+
fill="currentColor"
29+
/>
30+
</g>
31+
</svg>
32+
</Icon>
33+
);
34+
35+
AddCircleIcon.displayName = 'AddCircleIcon';

‎packages/icons/src/components/semantic/AddIcon.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import Icon from '../../icon';
2+
import type { IconProps } from '../../types';
3+
4+
export const AddIcon = (props: IconProps) => (
5+
<Icon {...props}>
6+
<svg
7+
width="24"
8+
height="24"
9+
viewBox="0 0 24 24"
10+
fill="none"
11+
xmlns="http://www.w3.org/2000/svg"
12+
aria-hidden="true"
13+
>
14+
<mask
15+
id="mask0_7258_10417"
16+
style={{ maskType: 'alpha' }}
17+
maskUnits="userSpaceOnUse"
18+
x="0"
19+
y="0"
20+
width="24"
21+
height="24"
22+
>
23+
<rect width="24" height="24" fill="currentColor" />
24+
</mask>
25+
<g mask="url(#mask0_7258_10417)">
26+
<path d="M11 13H5V11H11V5H13V11H19V13H13V19H11V13Z" fill="currentColor" />
27+
</g>
28+
</svg>
29+
</Icon>
30+
);
31+
32+
AddIcon.displayName = 'AddIcon';

‎packages/icons/src/components/semantic/ArrowBackIcon.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import Icon from '../../icon';
2+
import type { IconProps } from '../../types';
3+
4+
export const ArrowBackIcon = (props: IconProps) => (
5+
<Icon {...props}>
6+
<svg
7+
width="24"
8+
height="24"
9+
viewBox="0 0 24 24"
10+
fill="none"
11+
xmlns="http://www.w3.org/2000/svg"
12+
aria-hidden="true"
13+
>
14+
<mask
15+
id="mask0_7258_14654"
16+
style={{ maskType: 'alpha' }}
17+
maskUnits="userSpaceOnUse"
18+
x="0"
19+
y="0"
20+
width="24"
21+
height="24"
22+
>
23+
<rect width="24" height="24" fill="currentColor" />
24+
</mask>
25+
<g mask="url(#mask0_7258_14654)">
26+
<path
27+
d="M7.825 13L13.425 18.6L12 20L4 12L12 4L13.425 5.4L7.825 11H20V13H7.825Z"
28+
fill="currentColor"
29+
/>
30+
</g>
31+
</svg>
32+
</Icon>
33+
);
34+
35+
ArrowBackIcon.displayName = 'ArrowBackIcon';

‎packages/icons/src/components/semantic/ArrowCircleDownIcon.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import Icon from '../../icon';
2+
import type { IconProps } from '../../types';
3+
4+
export const ArrowCircleDownIcon = (props: IconProps) => (
5+
<Icon {...props}>
6+
<svg
7+
width="24"
8+
height="24"
9+
viewBox="0 0 24 24"
10+
fill="none"
11+
xmlns="http://www.w3.org/2000/svg"
12+
aria-hidden="true"
13+
>
14+
<mask
15+
id="mask0_7258_14955"
16+
style={{ maskType: 'alpha' }}
17+
maskUnits="userSpaceOnUse"
18+
x="0"
19+
y="0"
20+
width="24"
21+
height="24"
22+
>
23+
<rect width="24" height="24" fill="currentColor" />
24+
</mask>
25+
<g mask="url(#mask0_7258_14955)">
26+
<path
27+
d="M12 16L16 12L14.6 10.6L13 12.2V8H11V12.2L9.4 10.6L8 12L12 16ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z"
28+
fill="currentColor"
29+
/>
30+
</g>
31+
</svg>
32+
</Icon>
33+
);
34+
35+
ArrowCircleDownIcon.displayName = 'ArrowCircleDownIcon';

‎packages/icons/src/components/semantic/ArrowCircleUpIcon.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import Icon from '../../icon';
2+
import type { IconProps } from '../../types';
3+
4+
export const ArrowCircleUpIcon = (props: IconProps) => (
5+
<Icon {...props}>
6+
<svg
7+
width="24"
8+
height="24"
9+
viewBox="0 0 24 24"
10+
fill="none"
11+
xmlns="http://www.w3.org/2000/svg"
12+
aria-hidden="true"
13+
>
14+
<mask
15+
id="mask0_7258_22897"
16+
style={{ maskType: 'alpha' }}
17+
maskUnits="userSpaceOnUse"
18+
x="0"
19+
y="0"
20+
width="24"
21+
height="24"
22+
>
23+
<rect width="24" height="24" fill="currentColor" />
24+
</mask>
25+
<g mask="url(#mask0_7258_22897)">
26+
<path
27+
d="M11 16H13V11.8L14.6 13.4L16 12L12 8L8 12L9.4 13.4L11 11.8V16ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z"
28+
fill="currentColor"
29+
/>
30+
</g>
31+
</svg>
32+
</Icon>
33+
);
34+
35+
ArrowCircleUpIcon.displayName = 'ArrowCircleUpIcon';

‎packages/icons/src/components/semantic/CalendarMonthIcon.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import Icon from '../../icon';
2+
import type { IconProps } from '../../types';
3+
4+
export const CalendarMonthIcon = (props: IconProps) => (
5+
<Icon {...props}>
6+
<svg
7+
width="24"
8+
height="24"
9+
viewBox="0 0 24 24"
10+
fill="none"
11+
xmlns="http://www.w3.org/2000/svg"
12+
aria-hidden="true"
13+
>
14+
<mask
15+
id="mask0_7258_22280"
16+
style={{ maskType: 'alpha' }}
17+
maskUnits="userSpaceOnUse"
18+
x="0"
19+
y="0"
20+
width="24"
21+
height="24"
22+
>
23+
<rect width="24" height="24" fill="currentColor" />
24+
</mask>
25+
<g mask="url(#mask0_7258_22280)">
26+
<path
27+
d="M12 14C11.7167 14 11.4792 13.9042 11.2875 13.7125C11.0958 13.5208 11 13.2833 11 13C11 12.7167 11.0958 12.4792 11.2875 12.2875C11.4792 12.0958 11.7167 12 12 12C12.2833 12 12.5208 12.0958 12.7125 12.2875C12.9042 12.4792 13 12.7167 13 13C13 13.2833 12.9042 13.5208 12.7125 13.7125C12.5208 13.9042 12.2833 14 12 14ZM8 14C7.71667 14 7.47917 13.9042 7.2875 13.7125C7.09583 13.5208 7 13.2833 7 13C7 12.7167 7.09583 12.4792 7.2875 12.2875C7.47917 12.0958 7.71667 12 8 12C8.28333 12 8.52083 12.0958 8.7125 12.2875C8.90417 12.4792 9 12.7167 9 13C9 13.2833 8.90417 13.5208 8.7125 13.7125C8.52083 13.9042 8.28333 14 8 14ZM16 14C15.7167 14 15.4792 13.9042 15.2875 13.7125C15.0958 13.5208 15 13.2833 15 13C15 12.7167 15.0958 12.4792 15.2875 12.2875C15.4792 12.0958 15.7167 12 16 12C16.2833 12 16.5208 12.0958 16.7125 12.2875C16.9042 12.4792 17 12.7167 17 13C17 13.2833 16.9042 13.5208 16.7125 13.7125C16.5208 13.9042 16.2833 14 16 14ZM12 18C11.7167 18 11.4792 17.9042 11.2875 17.7125C11.0958 17.5208 11 17.2833 11 17C11 16.7167 11.0958 16.4792 11.2875 16.2875C11.4792 16.0958 11.7167 16 12 16C12.2833 16 12.5208 16.0958 12.7125 16.2875C12.9042 16.4792 13 16.7167 13 17C13 17.2833 12.9042 17.5208 12.7125 17.7125C12.5208 17.9042 12.2833 18 12 18ZM8 18C7.71667 18 7.47917 17.9042 7.2875 17.7125C7.09583 17.5208 7 17.2833 7 17C7 16.7167 7.09583 16.4792 7.2875 16.2875C7.47917 16.0958 7.71667 16 8 16C8.28333 16 8.52083 16.0958 8.7125 16.2875C8.90417 16.4792 9 16.7167 9 17C9 17.2833 8.90417 17.5208 8.7125 17.7125C8.52083 17.9042 8.28333 18 8 18ZM16 18C15.7167 18 15.4792 17.9042 15.2875 17.7125C15.0958 17.5208 15 17.2833 15 17C15 16.7167 15.0958 16.4792 15.2875 16.2875C15.4792 16.0958 15.7167 16 16 16C16.2833 16 16.5208 16.0958 16.7125 16.2875C16.9042 16.4792 17 16.7167 17 17C17 17.2833 16.9042 17.5208 16.7125 17.7125C16.5208 17.9042 16.2833 18 16 18ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H6V2H8V4H16V2H18V4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V10H5V20Z"
28+
fill="currentColor"
29+
/>
30+
</g>
31+
</svg>
32+
</Icon>
33+
);
34+
35+
CalendarMonthIcon.displayName = 'CalendarMonthIcon';

‎packages/icons/src/components/semantic/CancelIcon.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import Icon from '../../icon';
2+
import type { IconProps } from '../../types';
3+
4+
export const CancelIcon = (props: IconProps) => (
5+
<Icon {...props}>
6+
<svg
7+
width="24"
8+
height="24"
9+
viewBox="0 0 24 24"
10+
fill="none"
11+
xmlns="http://www.w3.org/2000/svg"
12+
aria-hidden="true"
13+
>
14+
<mask
15+
id="mask0_7258_26331"
16+
style={{ maskType: 'alpha' }}
17+
maskUnits="userSpaceOnUse"
18+
x="0"
19+
y="0"
20+
width="24"
21+
height="24"
22+
>
23+
<rect width="24" height="24" fill="currentColor" />
24+
</mask>
25+
<g mask="url(#mask0_7258_26331)">
26+
<path
27+
d="M8.4 17L12 13.4L15.6 17L17 15.6L13.4 12L17 8.4L15.6 7L12 10.6L8.4 7L7 8.4L10.6 12L7 15.6L8.4 17ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z"
28+
fill="currentColor"
29+
/>
30+
</g>
31+
</svg>
32+
</Icon>
33+
);
34+
35+
CancelIcon.displayName = 'CancelIcon';

0 commit comments

Comments
 (0)