Skip to content

Commit 47f880b

Browse files
jjangminiijllee000
jjangminii
and
jllee000
authored
Setting(project): svg sprite 설정 (#15)
* setting : icon 파일 추가 * setting: 기존 sprite 세팅 * setting: iconNames 자동 프리티어 추가 * setting: h/w 삭제 명령어 추가 * setting: 명령어 통합 * setting: icon components 추가 * setting: 의존성, 컬러 추가 * setting: 의존성 세팅 * chore: 경로 수정 * chore: update pnpm lock 파일 --------- Co-authored-by: jllee000 <jllee000@naver.com>
1 parent eb7349f commit 47f880b

27 files changed

+348
-110
lines changed

‎apps/client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"react-dom": "^19.1.1"
1515
},
1616
"devDependencies": {
17+
"@pivanov/vite-plugin-svg-sprite": "^3.1.3",
1718
"@eslint/js": "^9.33.0",
1819
"@pinback/eslint-config": "workspace:*",
1920
"@pinback/typescript-config": "workspace:*",

‎apps/client/vite.config.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,19 @@ import tailwindcss from '@tailwindcss/vite';
22
import react from '@vitejs/plugin-react-swc';
33
import { defineConfig } from 'vite';
44
import tsconfigPaths from 'vite-tsconfig-paths';
5+
import svgSpritePlugin from '@pivanov/vite-plugin-svg-sprite';
56

67
// https://vite.dev/config/
78
export default defineConfig({
89
// TODO: svg 설정 추가
9-
plugins: [react(), tsconfigPaths(), tailwindcss()],
10+
plugins: [
11+
react(),
12+
tsconfigPaths(),
13+
tailwindcss(),
14+
svgSpritePlugin({
15+
iconDirs: ['../../packages/design-system/src/icons/source'],
16+
symbolId: 'icon-[name]',
17+
inject: 'body-last',
18+
}),
19+
],
1020
});

‎apps/extension/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@
1111
"zip": "vite build && node scripts/zip.mjs"
1212
},
1313
"dependencies": {
14-
"@pivanov/vite-plugin-svg-sprite": "^3.1.3",
1514
"@tanstack/react-query": "^5.85.3",
1615
"react": "^19.1.1",
1716
"react-dom": "^19.1.1"
1817
},
1918
"devDependencies": {
19+
"@pivanov/vite-plugin-svg-sprite": "^3.1.3",
2020
"@crxjs/vite-plugin": "^2.2.0",
2121
"@eslint/js": "^9.33.0",
2222
"@pinback/design-system": "workspace:*",

‎apps/extension/vite.config.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,26 @@ import tsconfigPaths from 'vite-tsconfig-paths';
66
import { resolve } from 'path';
77
import { crx } from '@crxjs/vite-plugin';
88
import manifest from './manifest.json';
9+
import svgSpritePlugin from '@pivanov/vite-plugin-svg-sprite';
10+
911
export default defineConfig({
1012
plugins: [
1113
react(),
1214
tsconfigPaths({
1315
projects: [resolve(__dirname, '../../tsconfig.json')],
1416
}),
1517
tailwindcss(),
16-
crx({ manifest }),
18+
crx({ manifest }),
19+
svgSpritePlugin({
20+
iconDirs: ['../../packages/design-system/src/icons/source'],
21+
symbolId: 'icon-[name]',
22+
inject: 'body-last',
23+
}),
1724
],
1825

1926
build: {
2027
outDir: 'dist',
2128
copyPublicDir: true,
22-
2329
},
2430
publicDir: 'public',
2531
resolve: {
@@ -32,4 +38,4 @@ export default defineConfig({
3238
'@components': resolve(__dirname, './src/components'),
3339
},
3440
},
35-
});
41+
});

‎apps/landing/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"react-dom": "^19.1.1"
1515
},
1616
"devDependencies": {
17+
"@pivanov/vite-plugin-svg-sprite": "^3.1.3",
1718
"@eslint/js": "^9.33.0",
1819
"@pinback/eslint-config": "workspace:*",
1920
"@pinback/typescript-config": "workspace:*",

‎apps/landing/vite.config.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,19 @@ import tailwindcss from '@tailwindcss/vite';
22
import react from '@vitejs/plugin-react-swc';
33
import { defineConfig } from 'vite';
44
import tsconfigPaths from 'vite-tsconfig-paths';
5+
import svgSpritePlugin from '@pivanov/vite-plugin-svg-sprite';
56

67
// https://vite.dev/config/
78
export default defineConfig({
89
// TODO: svg 설정 추가
9-
plugins: [react(), tsconfigPaths(), tailwindcss()],
10+
plugins: [
11+
react(),
12+
tsconfigPaths(),
13+
tailwindcss(),
14+
svgSpritePlugin({
15+
iconDirs: ['../../packages/design-system/src/icons/source'],
16+
symbolId: 'icon-[name]',
17+
inject: 'body-last',
18+
}),
19+
],
1020
});

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"test": "turbo run test"
1111
},
1212
"devDependencies": {
13+
"@pivanov/vite-plugin-svg-sprite": "^3.1.3",
1314
"@trivago/prettier-plugin-sort-imports": "^5.2.2",
1415
"prettier": "^3.6.2",
1516
"prettier-plugin-tailwindcss": "^0.6.14",
@@ -27,4 +28,3 @@
2728
"node": ">=18"
2829
}
2930
}
30-

‎packages/design-system/package.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@
1515
"build": "vite build",
1616
"build:storybook": "storybook build",
1717
"dev:storybook": "storybook dev -p 6006",
18-
"generate:component": "turbo gen react-component"
18+
"icons:clean": "svgo -f src/icons/source --config=./svgo.config.mjs --multipass",
19+
"generate:icons": "tsx src/icons/scripts/generate-icon-list.ts && prettier --write src/icons/iconNames.ts",
20+
"generate:component": "turbo gen react-component",
21+
"icons": "pnpm icons:clean && pnpm generate:icons"
1922
},
2023
"devDependencies": {
2124
"@chromatic-com/storybook": "4.1.1",
@@ -42,18 +45,21 @@
4245
"playwright": "^1.55.0",
4346
"storybook": "9.1.3",
4447
"tailwindcss": "^4.1.12",
48+
"tsx": "^4.20.4",
4549
"typescript": "5.9.2",
4650
"typescript-eslint": "^8.39.1",
4751
"vite": "^7.1.2",
4852
"vitest": "^3.2.4"
4953
},
5054
"dependencies": {
55+
"@pivanov/vite-plugin-svg-sprite": "^3.1.3",
5156
"@radix-ui/react-slot": "^1.2.3",
5257
"class-variance-authority": "^0.7.1",
5358
"clsx": "^2.1.1",
5459
"lucide-react": "^0.540.0",
5560
"react": "^19.1.0",
5661
"react-dom": "^19.1.0",
62+
"svgo": "^4.0.0",
5763
"tailwind-merge": "^3.3.1",
5864
"tw-animate-css": "^1.3.7"
5965
}

‎packages/design-system/src/icons/components/icon.tsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import type { IconName } from '../iconNames';
2+
import React from 'react';
3+
import clsx from 'clsx';
4+
5+
type IconRotate = 90 | 180 | 270;
6+
7+
type IconColor =
8+
| 'main0'
9+
| 'main100'
10+
| 'main200'
11+
| 'main300'
12+
| 'main400'
13+
| 'main500'
14+
| 'main600'
15+
| 'gradient-start'
16+
| 'gradient-end'
17+
| 'secondary'
18+
| 'gray0'
19+
| 'gray100'
20+
| 'gray200'
21+
| 'gray300'
22+
| 'gray400'
23+
| 'gray500'
24+
| 'gray600'
25+
| 'gray700'
26+
| 'gray800'
27+
| 'gray900'
28+
| 'white-bg'
29+
| 'gray-bg'
30+
| 'font-black-1'
31+
| 'font-gray-2'
32+
| 'font-gray-3'
33+
| 'font-ltgray-4'
34+
| 'font-ltgray-5'
35+
| 'error'
36+
| 'success'
37+
| 'category-red-text'
38+
| 'category-purple-text'
39+
| 'category-navyblue-text'
40+
| 'category-skyblue-text'
41+
| 'category-emerald-text'
42+
| 'category-navygreen-text'
43+
| 'category-khaki-text'
44+
| 'category-orange-text'
45+
| 'category-amber-text'
46+
| 'category-maroon-text'
47+
| 'category-red-bg'
48+
| 'category-purple-bg'
49+
| 'category-navyblue-bg'
50+
| 'category-skyblue-bg'
51+
| 'category-emerald-bg'
52+
| 'category-navygreen-bg'
53+
| 'category-khaki-bg'
54+
| 'category-orange-bg'
55+
| 'category-amber-bg'
56+
| 'category-maroon-bg';
57+
58+
interface IconProps extends React.SVGProps<SVGSVGElement> {
59+
name: IconName;
60+
size?: number | string;
61+
width?: number | string;
62+
height?: number | string;
63+
color?: IconColor;
64+
className?: string;
65+
rotate?: IconRotate;
66+
ariaHidden?: boolean;
67+
}
68+
69+
export const Icon = ({
70+
name,
71+
size,
72+
width,
73+
height,
74+
color,
75+
className,
76+
rotate,
77+
ariaHidden = true,
78+
...rest
79+
}: IconProps) => {
80+
const w = width ?? size ?? 20;
81+
const h = height ?? size ?? 20;
82+
83+
const rotateClass =
84+
rotate === 90
85+
? 'rotate-90'
86+
: rotate === 180
87+
? 'rotate-180'
88+
: rotate === 270
89+
? 'rotate-[270deg]'
90+
: '';
91+
92+
const combined = clsx('inline-block', rotateClass, className);
93+
94+
return (
95+
<svg
96+
width={typeof w === 'number' ? `${w}px` : w}
97+
height={typeof h === 'number' ? `${h}px` : h}
98+
className={combined}
99+
style={color ? { color: `var(--color-${color})` } : undefined}
100+
aria-hidden={ariaHidden}
101+
{...rest}
102+
>
103+
<use href={`#icon-${name}`} />
104+
</svg>
105+
);
106+
};

‎packages/design-system/src/icons/iconNames.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// 이 파일은 자동 생성 파일입니다. (직접 수정 금지)
2+
export const iconNames = [
3+
'ic_arrow_down_active',
4+
'ic_arrow_down_disable',
5+
'ic_bookmark_active',
6+
'ic_bookmark_disable',
7+
'ic_clock_active',
8+
'ic_clock_disable',
9+
'ic_close',
10+
'ic_details_category',
11+
'ic_details_disable',
12+
'ic_info',
13+
'ic_plus',
14+
] as const;
15+
export type IconName = (typeof iconNames)[number];

0 commit comments

Comments
 (0)