Skip to content

Commit e77aac6

Browse files
frontendfixerfrontendfixer
committed
restructure using svgo icon component
1 parent 220b960 commit e77aac6

File tree

2 files changed

+124
-132
lines changed

2 files changed

+124
-132
lines changed

‎src/components/LanguageAndTool.tsx

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,45 @@
1-
import codeIcon from '../assets/images/icons/code.svg';
2-
import toolsIcon from '../assets/images/icons/tools.svg';
3-
import skills from '../data/Skills';
4-
const { languages, tools } = skills;
1+
import CodeIcon from '../assets/images/icons/code.svg?react';
2+
import ToolsIcon from '../assets/images/icons/tools.svg?react';
3+
import { languages, tools } from '../data/Skills';
54

65
const LanguageAndTool = () => {
76
return (
8-
<div className="mx-auto -mt-20 flex w-full flex-col overflow-hidden rounded-3xl bg-white shadow-lg dark:bg-dark-700 md:w-[90%] md:flex-row">
7+
<div className="mx-auto -mt-20 flex w-full flex-col overflow-hidden rounded-3xl bg-white shadow-lg md:w-[90%] md:flex-row dark:bg-dark-700">
98
<div className="flex flex-col border-b-2 border-dashed border-dark-500 p-4 md:w-2/3 md:border-b-0 md:border-r-2">
109
<div className="mx-auto rounded-full bg-blue-300 p-4">
11-
<img src={codeIcon} alt="" aria-hidden className="h-12 w-12" />
10+
<CodeIcon className="h-12 w-12" />
1211
</div>
13-
<h3 className="text-center text-xl font-bold text-dark-900 dark:text-gray-50 md:text-3xl">
12+
<h3 className="text-center text-xl font-bold text-dark-900 md:text-3xl dark:text-gray-50">
1413
I can code with
1514
</h3>
1615
<div className="justify-items-between mt-4 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
17-
{languages.map(language => (
16+
{languages.map(({ id, name, Icon }) => (
1817
<div
19-
key={language.id}
18+
key={id}
2019
className="flex items-center justify-between rounded-lg bg-gray-500/30 px-4 py-2 text-dark dark:bg-white"
2120
>
22-
<img
23-
src={language.icon}
24-
alt={language.name}
25-
className="h-12 w-12"
26-
/>
27-
<h3 className="ml-auto text-xl font-medium">{language.name}</h3>
21+
<Icon className="h-12 w-12" />
22+
<h3 className="ml-auto text-xl font-medium">{name}</h3>
2823
</div>
2924
))}
3025
</div>
3126
</div>
3227
<div className="flex flex-col p-4 md:w-1/2 lg:w-1/3">
3328
<div className="mx-auto rounded-full bg-blue-300 p-4">
34-
<img src={toolsIcon} alt="" aria-hidden className="h-12 w-12" />
29+
<ToolsIcon className="h-12 w-12" />
30+
{/* <img src={toolsIcon} alt="" aria-hidden className="h-12 w-12" /> */}
3531
</div>
36-
<h3 className="text-center text-xl font-bold text-dark-900 dark:text-gray-50 md:text-3xl">
32+
<h3 className="text-center text-xl font-bold text-dark-900 md:text-3xl dark:text-gray-50">
3733
Tools I use
3834
</h3>
3935
<div className="justify-items-between mt-4 grid h-full grid-cols-1 gap-2 lg:grid-cols-2">
40-
{tools.map(tool => (
36+
{tools.map(({ id, name, Icon }) => (
4137
<div
42-
key={tool.id}
43-
className="flex items-center justify-between gap-2 rounded-lg bg-gray-500/30 p-4 text-dark dark:bg-white lg:flex-col lg:gap-4"
38+
key={id}
39+
className="flex items-center justify-between gap-2 rounded-lg bg-gray-500/30 p-4 text-dark lg:flex-col lg:gap-4 dark:bg-white"
4440
>
45-
<img src={tool.icon} alt={tool.name} className="h-12 w-12" />
46-
<h3 className="text-xl font-medium">{tool.name}</h3>
41+
<Icon className="h-12 w-12" />
42+
<h3 className="text-xl font-medium">{name}</h3>
4743
</div>
4844
))}
4945
</div>

‎src/data/Skills.ts

Lines changed: 106 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,114 @@
1-
import bootstrapLogo from '../assets/images/icons/bootstrap.svg';
2-
import cssLogo from '../assets/images/icons/css.svg';
3-
import figmaLogo from '../assets/images/icons/figma.svg';
4-
import gitLogo from '../assets/images/icons/git.svg';
5-
import htmlLogo from '../assets/images/icons/html.svg';
6-
import javascriptLogo from '../assets/images/icons/javascript.svg';
7-
import mysqlLogo from '../assets/images/icons/mysql.svg';
8-
import nextjsLogo from '../assets/images/icons/nextjs.svg';
9-
import photoshopLogo from '../assets/images/icons/photoshop.svg';
10-
import phpLogo from '../assets/images/icons/php.svg';
11-
import reactLogo from '../assets/images/icons/react.svg';
12-
import reduxLogo from '../assets/images/icons/redux.svg';
13-
import sassLogo from '../assets/images/icons/sass.svg';
14-
import tailwindcssLogo from '../assets/images/icons/tailwindcss.svg';
15-
import vscodeLogo from '../assets/images/icons/vscode.svg';
1+
import BootstrapLogo from '../assets/images/icons/bootstrap.svg?react';
2+
import CssLogo from '../assets/images/icons/css.svg?react';
3+
import FigmaLogo from '../assets/images/icons/figma.svg?react';
4+
import GitLogo from '../assets/images/icons/git.svg?react';
5+
import HtmlLogo from '../assets/images/icons/html.svg?react';
6+
import JavascriptLogo from '../assets/images/icons/javascript.svg?react';
7+
import MysqlLogo from '../assets/images/icons/mysql.svg?react';
8+
import NextjsLogo from '../assets/images/icons/nextjs.svg?react';
9+
import PhotoshopLogo from '../assets/images/icons/photoshop.svg?react';
10+
import PhpLogo from '../assets/images/icons/php.svg?react';
11+
import ReactLogo from '../assets/images/icons/react.svg?react';
12+
import ReduxLogo from '../assets/images/icons/redux.svg?react';
13+
import SassLogo from '../assets/images/icons/sass.svg?react';
14+
import TailwindCssLogo from '../assets/images/icons/tailwindcss.svg?react';
15+
import VscodeLogo from '../assets/images/icons/vscode.svg?react';
1616

1717
type PropsType = {
1818
id: number;
1919
name: string;
20-
icon: string;
20+
Icon: React.FunctionComponent<React.SVGProps<SVGAElement>>;
2121
color: string;
2222
};
2323

24-
const SKILLS = {
25-
languages: <PropsType[]>[
26-
{
27-
id: 1,
28-
name: 'PHP',
29-
icon: phpLogo,
30-
color: '#61DBFB',
31-
},
32-
{
33-
id: 1,
34-
name: 'React',
35-
icon: reactLogo,
36-
color: '#61DBFB',
37-
},
38-
{
39-
id: 2,
40-
name: 'Redux',
41-
icon: reduxLogo,
42-
color: '#61DBFB',
43-
},
44-
{
45-
id: 3,
46-
name: 'Next JS',
47-
icon: nextjsLogo,
48-
color: '#61DBFB',
49-
},
50-
{
51-
id: 3,
52-
name: 'MySQL',
53-
icon: mysqlLogo,
54-
color: '#61DBFB',
55-
},
56-
{
57-
id: 4,
58-
name: 'Javascript',
59-
icon: javascriptLogo,
60-
color: '#61DBFB',
61-
},
62-
{
63-
id: 5,
64-
name: 'HTML5',
65-
icon: htmlLogo,
66-
color: '#61DBFB',
67-
},
68-
{
69-
id: 6,
70-
name: 'CSS3',
71-
icon: cssLogo,
72-
color: '#61DBFB',
73-
},
74-
{
75-
id: 7,
76-
name: 'SASS',
77-
icon: sassLogo,
78-
color: '#61DBFB',
79-
},
80-
{
81-
id: 8,
82-
name: 'Bootstrap',
83-
icon: bootstrapLogo,
84-
color: '#61DBFB',
85-
},
86-
{
87-
id: 9,
88-
name: 'TailwindCSS',
89-
icon: tailwindcssLogo,
90-
color: '#61DBFB',
91-
},
92-
],
24+
export const languages = <PropsType[]>[
25+
{
26+
id: 1,
27+
name: 'PHP',
28+
Icon: PhpLogo,
29+
color: '#61DBFB',
30+
},
31+
{
32+
id: 2,
33+
name: 'React',
34+
Icon: ReactLogo,
35+
color: '#61DBFB',
36+
},
37+
{
38+
id: 3,
39+
name: 'Redux',
40+
Icon: ReduxLogo,
41+
color: '#61DBFB',
42+
},
43+
{
44+
id: 4,
45+
name: 'Next JS',
46+
Icon: NextjsLogo,
47+
color: '#61DBFB',
48+
},
49+
{
50+
id: 5,
51+
name: 'MySQL',
52+
Icon: MysqlLogo,
53+
color: '#61DBFB',
54+
},
55+
{
56+
id: 6,
57+
name: 'Javascript',
58+
Icon: JavascriptLogo,
59+
color: '#61DBFB',
60+
},
61+
{
62+
id: 7,
63+
name: 'HTML5',
64+
Icon: HtmlLogo,
65+
color: '#61DBFB',
66+
},
67+
{
68+
id: 8,
69+
name: 'CSS3',
70+
Icon: CssLogo,
71+
color: '#61DBFB',
72+
},
73+
{
74+
id: 9,
75+
name: 'SASS',
76+
Icon: SassLogo,
77+
color: '#61DBFB',
78+
},
79+
{
80+
id: 10,
81+
name: 'Bootstrap',
82+
Icon: BootstrapLogo,
83+
color: '#61DBFB',
84+
},
85+
{
86+
id: 11,
87+
name: 'TailwindCSS',
88+
Icon: TailwindCssLogo,
89+
color: '#61DBFB',
90+
},
91+
];
9392

94-
tools: <PropsType[]>[
95-
{
96-
id: 1,
97-
name: 'VSCode',
98-
icon: vscodeLogo,
99-
},
100-
{
101-
id: 2,
102-
name: 'Git',
103-
icon: gitLogo,
104-
},
105-
{
106-
id: 3,
107-
name: 'Figma',
108-
icon: figmaLogo,
109-
},
110-
{
111-
id: 4,
112-
name: 'PhotoShop',
113-
icon: photoshopLogo,
114-
},
115-
],
116-
};
117-
118-
export default SKILLS;
93+
export const tools = <PropsType[]>[
94+
{
95+
id: 1,
96+
name: 'VSCode',
97+
Icon: VscodeLogo,
98+
},
99+
{
100+
id: 2,
101+
name: 'Git',
102+
Icon: GitLogo,
103+
},
104+
{
105+
id: 3,
106+
name: 'Figma',
107+
Icon: FigmaLogo,
108+
},
109+
{
110+
id: 4,
111+
name: 'PhotoShop',
112+
Icon: PhotoshopLogo,
113+
},
114+
];

0 commit comments

Comments
 (0)