Skip to content

Commit 212c6a0

Browse files
devkyoung2devkyoung2
authored
Merge pull request #145 from Boggle-Boggle/refctor/144
[Refctor/144] 아이콘 컴포넌트 리팩토링
2 parents dd375cc + e01b7f4 commit 212c6a0

Some content is hidden

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

72 files changed

+1031
-304
lines changed

‎.eslintrc.cjs‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,22 @@ module.exports = {
99
project: './tsconfig.json',
1010
tsconfigRootDir: './',
1111
},
12-
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'airbnb', 'airbnb/hooks', 'airbnb-typescript', 'prettier', 'plugin:storybook/recommended'],
13-
ignorePatterns: ['dist', '.eslintrc.cjs', 'vite.config.js', 'tailwind.config.cjs'],
12+
extends: [
13+
'eslint:recommended',
14+
'plugin:@typescript-eslint/recommended',
15+
'plugin:react-hooks/recommended',
16+
'airbnb',
17+
'airbnb/hooks',
18+
'airbnb-typescript',
19+
'prettier',
20+
'plugin:storybook/recommended',
21+
],
22+
ignorePatterns: ['dist', '*.cjs', 'vite.config.js'],
1423
plugins: ['@typescript-eslint', 'react-refresh'],
1524
rules: {
1625
'react/react-in-jsx-scope': 'off',
1726
'react/no-unknown-property': ['error', { ignore: ['intensity', 'position', 'object'] }],
27+
'react/jsx-props-no-spreading': 'off',
1828
'import/no-extraneous-dependencies': 'off',
1929
'react/require-default-props': 'off',
2030
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
1010
"preview": "vite preview",
1111
"storybook": "storybook dev -p 6006",
12-
"icons": "npx @svgr/cli ./src/assets/refactor/icons --out-dir ./src/components/icons --replace-attr-values \"#303030=currentColor\"--ignore-existing --typescript --index-template svgr-template.js",
12+
"icons": "npx @svgr/cli ./src/assets/refactor/icons --index-template svgr-template.cjs",
1313
"build-storybook": "storybook build"
1414
},
1515
"dependencies": {

‎src/components/icons/ArrowBack.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import * as React from "react";
2-
import type { SVGProps } from "react";
3-
const SvgArrowBack = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" {...props}><path fill="currentColor" d="M5.559 11.346c4.496-3.537 11.27-2.918 14.97 1.855l.202.27.042.064a.75.75 0 0 1-1.207.878l-.047-.06-.174-.23c-3.139-4.051-8.854-4.62-12.716-1.707L8.27 14.06a.5.5 0 0 1-.353.853H3.625a.5.5 0 0 1-.5-.5V10.12a.5.5 0 0 1 .854-.353z" /></svg>;
4-
export default SvgArrowBack;
1+
import type { SVGProps } from 'react';
2+
3+
const ArrowBack = (props: SVGProps<SVGSVGElement>) => (
4+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
5+
<path
6+
fill="currentColor"
7+
d="M5.559 11.346c4.496-3.537 11.27-2.918 14.97 1.855l.202.27.042.064a.75.75 0 0 1-1.207.878l-.047-.06-.174-.23c-3.139-4.051-8.854-4.62-12.716-1.707L8.27 14.06a.5.5 0 0 1-.353.853H3.625a.5.5 0 0 1-.5-.5V10.12a.5.5 0 0 1 .854-.353z"
8+
/>
9+
</svg>
10+
);
11+
export default ArrowBack;

‎src/components/icons/ArrowDown.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,18 @@
1-
import * as React from "react";
2-
import type { SVGProps } from "react";
3-
const SvgArrowDown = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" {...props}><g clipPath="url(#arrow_down_svg__a)"><path fill="currentColor" d="M2.418 7.974a.75.75 0 0 1 1.056-1.056l.056.052L12 15.44l8.47-8.47.056-.052a.75.75 0 0 1 1.056 1.056l-.052.056-9 9a.75.75 0 0 1-1.06 0l-9-9z" /></g><defs><clipPath id="arrow_down_svg__a"><path fill="#fff" d="M0 0h24v24H0z" /></clipPath></defs></svg>;
4-
export default SvgArrowDown;
1+
import type { SVGProps } from 'react';
2+
3+
const ArrowDown = (props: SVGProps<SVGSVGElement>) => (
4+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" {...props}>
5+
<g clipPath="url(#arrow_down_svg__a)">
6+
<path
7+
fill="currentColor"
8+
d="M2.418 7.974a.75.75 0 0 1 1.056-1.056l.056.052L12 15.44l8.47-8.47.056-.052a.75.75 0 0 1 1.056 1.056l-.052.056-9 9a.75.75 0 0 1-1.06 0l-9-9z"
9+
/>
10+
</g>
11+
<defs>
12+
<clipPath id="arrow_down_svg__a">
13+
<path fill="#fff" d="M0 0h24v24H0z" />
14+
</clipPath>
15+
</defs>
16+
</svg>
17+
);
18+
export default ArrowDown;

‎src/components/icons/ArrowDownFilled.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,18 @@
1-
import * as React from "react";
2-
import type { SVGProps } from "react";
3-
const SvgArrowDownFilled = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" {...props}><g clipPath="url(#arrow_down_filled_svg__a)"><path fill="currentColor" d="M2.47 6.925a.75.75 0 0 0 0 1.06l9 9a.75.75 0 0 0 1.06 0l9-9 .052-.056a.75.75 0 0 0-.052-1.004c-.144-.144-.332-.127-.521-.13H2.829c-.14.007-.271.042-.36.13" /></g><defs><clipPath id="arrow_down_filled_svg__a"><path fill="#fff" d="M0 0h24v24H0z" /></clipPath></defs></svg>;
4-
export default SvgArrowDownFilled;
1+
import type { SVGProps } from 'react';
2+
3+
const ArrowDownFilled = (props: SVGProps<SVGSVGElement>) => (
4+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" {...props}>
5+
<g clipPath="url(#arrow_down_filled_svg__a)">
6+
<path
7+
fill="currentColor"
8+
d="M2.47 6.925a.75.75 0 0 0 0 1.06l9 9a.75.75 0 0 0 1.06 0l9-9 .052-.056a.75.75 0 0 0-.052-1.004c-.144-.144-.332-.127-.521-.13H2.829c-.14.007-.271.042-.36.13"
9+
/>
10+
</g>
11+
<defs>
12+
<clipPath id="arrow_down_filled_svg__a">
13+
<path fill="#fff" d="M0 0h24v24H0z" />
14+
</clipPath>
15+
</defs>
16+
</svg>
17+
);
18+
export default ArrowDownFilled;

‎src/components/icons/ArrowLeft.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,18 @@
1-
import * as React from "react";
2-
import type { SVGProps } from "react";
3-
const SvgArrowLeft = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" {...props}><g clipPath="url(#arrow_left_svg__a)"><path fill="currentColor" d="M15.97 2.47a.75.75 0 1 1 1.06 1.06L8.56 12l8.47 8.47.052.056a.75.75 0 0 1-1.056 1.056l-.056-.052-9-9a.75.75 0 0 1 0-1.06z" /></g><defs><clipPath id="arrow_left_svg__a"><path fill="#fff" d="M0 0h24v24H0z" /></clipPath></defs></svg>;
4-
export default SvgArrowLeft;
1+
import type { SVGProps } from 'react';
2+
3+
const ArrowLeft = (props: SVGProps<SVGSVGElement>) => (
4+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" {...props}>
5+
<g clipPath="url(#arrow_left_svg__a)">
6+
<path
7+
fill="currentColor"
8+
d="M15.97 2.47a.75.75 0 1 1 1.06 1.06L8.56 12l8.47 8.47.052.056a.75.75 0 0 1-1.056 1.056l-.056-.052-9-9a.75.75 0 0 1 0-1.06z"
9+
/>
10+
</g>
11+
<defs>
12+
<clipPath id="arrow_left_svg__a">
13+
<path fill="#fff" d="M0 0h24v24H0z" />
14+
</clipPath>
15+
</defs>
16+
</svg>
17+
);
18+
export default ArrowLeft;

‎src/components/icons/ArrowLeftFilled.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,18 @@
1-
import * as React from "react";
2-
import type { SVGProps } from "react";
3-
const SvgArrowLeftFilled = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" {...props}><g clipPath="url(#arrow_left_filled_svg__a)"><path fill="currentColor" d="M17.075 2.47a.75.75 0 0 0-1.06 0l-9 9a.75.75 0 0 0 0 1.06l9 9 .056.052a.75.75 0 0 0 1.004-.052c.144-.144.127-.332.13-.521V2.829c-.007-.14-.042-.271-.13-.36" /></g><defs><clipPath id="arrow_left_filled_svg__a"><path fill="#fff" d="M0 0h24v24H0z" /></clipPath></defs></svg>;
4-
export default SvgArrowLeftFilled;
1+
import type { SVGProps } from 'react';
2+
3+
const ArrowLeftFilled = (props: SVGProps<SVGSVGElement>) => (
4+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" {...props}>
5+
<g clipPath="url(#arrow_left_filled_svg__a)">
6+
<path
7+
fill="currentColor"
8+
d="M17.075 2.47a.75.75 0 0 0-1.06 0l-9 9a.75.75 0 0 0 0 1.06l9 9 .056.052a.75.75 0 0 0 1.004-.052c.144-.144.127-.332.13-.521V2.829c-.007-.14-.042-.271-.13-.36"
9+
/>
10+
</g>
11+
<defs>
12+
<clipPath id="arrow_left_filled_svg__a">
13+
<path fill="#fff" d="M0 0h24v24H0z" />
14+
</clipPath>
15+
</defs>
16+
</svg>
17+
);
18+
export default ArrowLeftFilled;

‎src/components/icons/ArrowNext.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import * as React from "react";
2-
import type { SVGProps } from "react";
3-
const SvgArrowNext = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" {...props}><path fill="currentColor" d="M18.441 11.346C13.945 7.809 7.171 8.428 3.471 13.2l-.202.27-.042.064a.75.75 0 0 0 1.207.878l.047-.06.174-.23c3.139-4.051 8.854-4.62 12.716-1.707L15.73 14.06a.5.5 0 0 0 .353.853h4.293a.5.5 0 0 0 .5-.5V10.12a.5.5 0 0 0-.854-.353z" /></svg>;
4-
export default SvgArrowNext;
1+
import type { SVGProps } from 'react';
2+
3+
const ArrowNext = (props: SVGProps<SVGSVGElement>) => (
4+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" {...props}>
5+
<path
6+
fill="currentColor"
7+
d="M18.441 11.346C13.945 7.809 7.171 8.428 3.471 13.2l-.202.27-.042.064a.75.75 0 0 0 1.207.878l.047-.06.174-.23c3.139-4.051 8.854-4.62 12.716-1.707L15.73 14.06a.5.5 0 0 0 .353.853h4.293a.5.5 0 0 0 .5-.5V10.12a.5.5 0 0 0-.854-.353z"
8+
/>
9+
</svg>
10+
);
11+
export default ArrowNext;

‎src/components/icons/ArrowRight.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,18 @@
1-
import * as React from "react";
2-
import type { SVGProps } from "react";
3-
const SvgArrowRight = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" {...props}><g clipPath="url(#arrow_right_svg__a)"><path fill="currentColor" d="M8.03 21.53a.75.75 0 1 1-1.06-1.06L15.44 12 6.97 3.53l-.052-.056a.75.75 0 0 1 1.056-1.056l.056.052 9 9a.75.75 0 0 1 0 1.06z" /></g><defs><clipPath id="arrow_right_svg__a"><path fill="#fff" d="M0 0h24v24H0z" /></clipPath></defs></svg>;
4-
export default SvgArrowRight;
1+
import type { SVGProps } from 'react';
2+
3+
const ArrowRight = (props: SVGProps<SVGSVGElement>) => (
4+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" {...props}>
5+
<g clipPath="url(#arrow_right_svg__a)">
6+
<path
7+
fill="currentColor"
8+
d="M8.03 21.53a.75.75 0 1 1-1.06-1.06L15.44 12 6.97 3.53l-.052-.056a.75.75 0 0 1 1.056-1.056l.056.052 9 9a.75.75 0 0 1 0 1.06z"
9+
/>
10+
</g>
11+
<defs>
12+
<clipPath id="arrow_right_svg__a">
13+
<path fill="#fff" d="M0 0h24v24H0z" />
14+
</clipPath>
15+
</defs>
16+
</svg>
17+
);
18+
export default ArrowRight;

‎src/components/icons/ArrowRightFilled.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,18 @@
1-
import * as React from "react";
2-
import type { SVGProps } from "react";
3-
const SvgArrowRightFilled = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" {...props}><g clipPath="url(#arrow_right_filled_svg__a)"><path fill="currentColor" d="M6.925 21.53a.75.75 0 0 0 1.06 0l9-9a.75.75 0 0 0 0-1.06l-9-9-.056-.052a.75.75 0 0 0-1.004.052c-.144.144-.127.332-.13.521v18.181c.007.14.042.27.13.358" /></g><defs><clipPath id="arrow_right_filled_svg__a"><path fill="#fff" d="M0 0h24v24H0z" /></clipPath></defs></svg>;
4-
export default SvgArrowRightFilled;
1+
import type { SVGProps } from 'react';
2+
3+
const ArrowRightFilled = (props: SVGProps<SVGSVGElement>) => (
4+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" {...props}>
5+
<g clipPath="url(#arrow_right_filled_svg__a)">
6+
<path
7+
fill="currentColor"
8+
d="M6.925 21.53a.75.75 0 0 0 1.06 0l9-9a.75.75 0 0 0 0-1.06l-9-9-.056-.052a.75.75 0 0 0-1.004.052c-.144.144-.127.332-.13.521v18.181c.007.14.042.27.13.358"
9+
/>
10+
</g>
11+
<defs>
12+
<clipPath id="arrow_right_filled_svg__a">
13+
<path fill="#fff" d="M0 0h24v24H0z" />
14+
</clipPath>
15+
</defs>
16+
</svg>
17+
);
18+
export default ArrowRightFilled;

0 commit comments

Comments
 (0)