Skip to content

Commit c4344b7

Browse files
imranhsayedimranhsayed
committed
Add icons
1 parent 96884ef commit c4344b7

19 files changed

+894
-51
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@
55
"scripts": {
66
"dev": "next dev",
77
"build": "next build",
8-
"start": "next start"
8+
"start": "next start",
9+
"svg": "svgr -d src/components/icons src/components/icons/svgs"
910
},
1011
"dependencies": {
12+
"@svgr/cli": "^5.5.0",
1113
"axios": "^0.21.1",
1214
"dompurify": "^2.3.1",
1315
"lodash": "^4.17.21",

‎pages/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import axios from 'axios';
1212

1313
export default function Home({data}) {
1414
const { header, footer } = data;
15+
1516
return (
1617
<div >
1718
<Header header={header}/>

‎src/components/icons/BurgerIcon.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import * as React from "react";
2+
3+
function SvgBurgerIcon(props) {
4+
return (
5+
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
6+
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
7+
</svg>
8+
);
9+
}
10+
11+
export default SvgBurgerIcon;

‎src/components/icons/Facebook.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import * as React from "react";
2+
3+
function SvgFacebook(props) {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width={24}
8+
height={24}
9+
viewBox="0 0 18 18"
10+
{...props}
11+
>
12+
<path
13+
d="M2.637 18h5.87v-6.398H6.399v-2.11h2.11V6.855a2.64 2.64 0 012.637-2.636h2.636v2.11h-2.11c-.581 0-1.054.472-1.054 1.054v2.11h3.07l-.351 2.109h-2.719V18h4.746A2.64 2.64 0 0018 15.363V2.637A2.64 2.64 0 0015.363 0H2.637A2.64 2.64 0 000 2.637v12.726A2.64 2.64 0 002.637 18zM1.055 2.637c0-.871.71-1.582 1.582-1.582h12.726c.871 0 1.582.71 1.582 1.582v12.726c0 .871-.71 1.582-1.582 1.582h-3.691v-4.289h2.555l.703-4.219h-3.258V7.383h3.164V3.164h-3.691a3.696 3.696 0 00-3.692 3.691v1.582h-2.11v4.22h2.11v4.288H2.637c-.871 0-1.582-.71-1.582-1.582zm0 0"
14+
fill="#fff"
15+
/>
16+
</svg>
17+
);
18+
}
19+
20+
export default SvgFacebook;

‎src/components/icons/Instagram.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import * as React from "react";
2+
3+
function SvgInstagram(props) {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width={24}
8+
height={24}
9+
viewBox="0 0 18 18"
10+
{...props}
11+
>
12+
<g fill="#fff">
13+
<path d="M2.637 18h12.726A2.64 2.64 0 0018 15.363V2.637A2.64 2.64 0 0015.363 0H2.637A2.64 2.64 0 000 2.637v12.726A2.64 2.64 0 002.637 18zM1.055 2.637c0-.871.71-1.582 1.582-1.582h12.726c.871 0 1.582.71 1.582 1.582v12.726c0 .871-.71 1.582-1.582 1.582H2.637c-.871 0-1.582-.71-1.582-1.582zm0 0" />
14+
<path d="M9 13.746A4.751 4.751 0 0013.746 9 4.751 4.751 0 009 4.254 4.751 4.751 0 004.254 9 4.751 4.751 0 009 13.746zM9 5.31A3.696 3.696 0 0112.691 9 3.696 3.696 0 019 12.691 3.696 3.696 0 015.309 9 3.696 3.696 0 019 5.309zm0 0M14.273 5.309c.872 0 1.582-.711 1.582-1.582 0-.872-.71-1.582-1.582-1.582-.87 0-1.582.71-1.582 1.582 0 .87.711 1.582 1.582 1.582zm0-2.11a.53.53 0 01.528.528.53.53 0 01-.528.527.53.53 0 01-.527-.527.53.53 0 01.527-.528zm0 0" />
15+
</g>
16+
</svg>
17+
);
18+
}
19+
20+
export default SvgInstagram;

‎src/components/icons/SearchIcon.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import * as React from "react";
2+
3+
function SvgSearchIcon(props) {
4+
return (
5+
<svg viewBox="0 0 24 24" {...props}>
6+
<path d="M10 4a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1114.32 4.906l5.387 5.387a1 1 0 01-1.414 1.414l-5.387-5.387A8 8 0 012 10z" />
7+
</svg>
8+
);
9+
}
10+
11+
export default SvgSearchIcon;

‎src/components/icons/TailwindIcon.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import * as React from "react";
2+
3+
function SvgTailwindIcon(props) {
4+
return (
5+
<svg
6+
className="tailwind-icon_svg__fill-current tailwind-icon_svg__h-8 tailwind-icon_svg__w-8 tailwind-icon_svg__mr-2"
7+
width={54}
8+
height={54}
9+
xmlns="http://www.w3.org/2000/svg"
10+
{...props}
11+
>
12+
<path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" />
13+
</svg>
14+
);
15+
}
16+
17+
export default SvgTailwindIcon;

‎src/components/icons/Twitter.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import * as React from "react";
2+
3+
function SvgTwitter(props) {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width={24}
8+
height={24}
9+
viewBox="0 0 18 18"
10+
{...props}
11+
>
12+
<path
13+
d="M18 1.969c-1.133.05-1.11.047-1.234.058L17.434.11s-2.09.774-2.622.91C13.418-.233 11.348-.288 9.864.622 8.653 1.367 8 2.648 8.22 4.145 5.859 3.816 3.87 2.695 2.3.813L1.805.215l-.371.68a4.142 4.142 0 00-.442 2.773c.078.379.207.742.387 1.082l-.426-.164-.05.71c-.051.724.19 1.567.644 2.259.129.195.293.406.5.617l-.219-.031.27.816a3.957 3.957 0 002.039 2.36c-.953.402-1.719.66-2.98 1.074L0 12.773l1.066.582c.407.223 1.844.965 3.262 1.188 3.156.496 6.711.09 9.102-2.063 2.015-1.816 2.675-4.394 2.539-7.082-.02-.406.09-.793.312-1.093.45-.594 1.715-2.332 1.719-2.336zm-2.559 1.707a2.712 2.712 0 00-.523 1.777c.137 2.707-.602 4.809-2.191 6.246-1.864 1.672-4.864 2.332-8.235 1.801-.61-.094-1.242-.309-1.762-.523 1.06-.364 1.875-.688 3.196-1.313l1.84-.871-2.036-.129c-.972-.062-1.785-.535-2.28-1.305.265-.011.519-.054.773-.129l1.941-.539-1.957-.48a2.915 2.915 0 01-2.164-2.086c.195.05.422.09.793.125l1.809.18L3.21 5.313c-1.035-.81-1.45-2.02-1.145-3.184 3.227 3.348 7.012 3.094 7.395 3.183-.086-.816-.086-.816-.11-.894-.488-1.727.583-2.602 1.067-2.898 1.008-.622 2.605-.715 3.715.308a.95.95 0 00.867.23c.27-.066.496-.14.71-.218l-.452 1.3h.582c-.11.15-.242.325-.399.536zm0 0"
14+
fill="#fff"
15+
/>
16+
</svg>
17+
);
18+
}
19+
20+
export default SvgTwitter;

‎src/components/icons/Youtube.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import * as React from "react";
2+
3+
function SvgYoutube(props) {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width={24}
8+
height={24}
9+
viewBox="0 0 18 18"
10+
{...props}
11+
>
12+
<g fill="#fff">
13+
<path d="M2.637 13.71h12.726A2.64 2.64 0 0018 11.075V2.637A2.64 2.64 0 0015.363 0H2.637A2.64 2.64 0 000 2.637v8.437a2.64 2.64 0 002.637 2.637zM1.055 2.638c0-.871.71-1.582 1.582-1.582h12.726c.871 0 1.582.71 1.582 1.582v8.437c0 .871-.71 1.582-1.582 1.582H2.637c-.871 0-1.582-.71-1.582-1.582zm0 0" />
14+
<path d="M6.363 3.324v7.168l6.348-3.644zm1.055 1.79l3.144 1.75-3.144 1.804zm0 0" />
15+
</g>
16+
</svg>
17+
);
18+
}
19+
20+
export default SvgYoutube;

‎src/components/icons/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export { default as BurgerIcon } from './BurgerIcon'
2+
export { default as Facebook } from './Facebook'
3+
export { default as Instagram } from './Instagram'
4+
export { default as SearchIcon } from './SearchIcon'
5+
export { default as TailwindIcon } from './TailwindIcon'
6+
export { default as Twitter } from './Twitter'
7+
export { default as Youtube } from './Youtube'

‎src/components/icons/svgs/burger-icon.svg

Lines changed: 5 additions & 0 deletions
Loading

‎src/components/icons/svgs/facebook.svg

Lines changed: 6 additions & 0 deletions
Loading

‎src/components/icons/svgs/instagram.svg

Lines changed: 8 additions & 0 deletions
Loading

‎src/components/icons/svgs/search-icon.svg

Lines changed: 5 additions & 0 deletions
Loading

‎src/components/icons/svgs/tailwind-icon.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/components/icons/svgs/twitter.svg

Lines changed: 6 additions & 0 deletions
Loading

‎src/components/icons/svgs/youtube.svg

Lines changed: 7 additions & 0 deletions
Loading

‎src/components/layouts/header/index.js

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import Head from 'next/head';
22
import Link from 'next/link';
33
import { isEmpty } from 'lodash';
44

5+
import {BurgerIcon, TailwindIcon} from '../../icons';
6+
57
const Header = ( { header } ) => {
68

79
const { headerMenuItems, siteDescription, siteLogoUrl, siteTitle, favicon } = header || {};
@@ -22,13 +24,7 @@ const Header = ( { header } ) => {
2224
siteLogoUrl ? (
2325
<img className="mr-2" src={ siteLogoUrl } alt={ `${ siteTitle } logo` } width="86"
2426
height="86"/>
25-
) : (
26-
<svg className="fill-current h-8 w-8 mr-2" width="54" height="54"
27-
viewBox="0 0 54 54"
28-
xmlns="http://www.w3.org/2000/svg">
29-
<path
30-
d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"></path>
31-
</svg> )
27+
) : <TailwindIcon/>
3228
}
3329
</a>
3430
</Link>
@@ -42,11 +38,7 @@ const Header = ( { header } ) => {
4238
<div className="block lg:hidden">
4339
<button
4440
className="flex items-center px-3 py-2 border rounded text-black border-black hover:text-black hover:border-black">
45-
<svg className="fill-current h-3 w-3" viewBox="0 0 20 20"
46-
xmlns="http://www.w3.org/2000/svg">
47-
<title>Menu</title>
48-
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
49-
</svg>
41+
<BurgerIcon/>
5042
</button>
5143
</div>
5244
<div

0 commit comments

Comments
 (0)