From 139b3a252c9f90de603be1a98e3186b359353541 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 22 Dec 2021 12:36:40 +0100 Subject: chore: replace svg imports with components It allows me to control the colors of each SVG paths. --- src/assets/images/icon-articles.svg | 190 ++++++--------------- src/assets/images/icon-close.svg | 44 ++--- src/assets/images/icon-home.svg | 84 ++------- src/assets/images/icon-search.svg | 24 +-- .../Buttons/ButtonSearch/ButtonSearch.tsx | 3 +- src/components/Buttons/Buttons.module.scss | 9 +- src/components/Icons/Blog/Blog.module.scss | 23 +++ src/components/Icons/Blog/Blog.tsx | 62 +++++++ src/components/Icons/CV/CV.module.scss | 53 ++++++ src/components/Icons/CV/CV.tsx | 58 +++++++ src/components/Icons/Close/Close.module.scss | 13 ++ src/components/Icons/Close/Close.tsx | 22 +++ src/components/Icons/Contact/Contact.module.scss | 29 ++++ src/components/Icons/Contact/Contact.tsx | 54 ++++++ .../Icons/Hamburger/Hamburger.module.scss | 7 +- src/components/Icons/Home/Home.module.scss | 42 +++++ src/components/Icons/Home/Home.tsx | 42 +++++ src/components/Icons/Search/Search.module.scss | 31 ++++ src/components/Icons/Search/Search.tsx | 30 ++++ src/components/Icons/index.tsx | 16 +- src/components/MainNav/MainNav.module.scss | 16 +- src/components/MainNav/MainNav.tsx | 16 +- src/styles/base/_colors.scss | 1 - 23 files changed, 588 insertions(+), 281 deletions(-) create mode 100644 src/components/Icons/Blog/Blog.module.scss create mode 100644 src/components/Icons/Blog/Blog.tsx create mode 100644 src/components/Icons/CV/CV.module.scss create mode 100644 src/components/Icons/CV/CV.tsx create mode 100644 src/components/Icons/Close/Close.module.scss create mode 100644 src/components/Icons/Close/Close.tsx create mode 100644 src/components/Icons/Contact/Contact.module.scss create mode 100644 src/components/Icons/Contact/Contact.tsx create mode 100644 src/components/Icons/Home/Home.module.scss create mode 100644 src/components/Icons/Home/Home.tsx create mode 100644 src/components/Icons/Search/Search.module.scss create mode 100644 src/components/Icons/Search/Search.tsx (limited to 'src') diff --git a/src/assets/images/icon-articles.svg b/src/assets/images/icon-articles.svg index e8141d6..acf5c64 100644 --- a/src/assets/images/icon-articles.svg +++ b/src/assets/images/icon-articles.svg @@ -16,139 +16,57 @@ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + id="defs81" /> diff --git a/src/assets/images/icon-close.svg b/src/assets/images/icon-close.svg index 58dd3a9..f108234 100644 --- a/src/assets/images/icon-close.svg +++ b/src/assets/images/icon-close.svg @@ -1,54 +1,42 @@ - - - - image/svg+xml - - - - + xmlns:svg="http://www.w3.org/2000/svg"> + showgrid="false" + inkscape:current-layer="svg825" /> + + id="rect843-3" + style="fill:#1d8fc9;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none" + d="m 96.353453,3.6465462 c 2.878592,2.8785909 2.878592,7.5134348 0,10.3920258 L 14.03857,96.353457 c -2.878589,2.878587 -7.5134339,2.878587 -10.3920248,0 -2.87859087,-2.878597 -2.87858988,-7.513442 -10e-7,-10.392029 L 85.961428,3.6465462 c 2.878591,-2.87859099 7.513434,-2.87859099 10.392025,0 z" /> diff --git a/src/assets/images/icon-home.svg b/src/assets/images/icon-home.svg index 11b4f0a..5bfe7f7 100644 --- a/src/assets/images/icon-home.svg +++ b/src/assets/images/icon-home.svg @@ -1,76 +1,14 @@ - + + + + + + + + + + + diff --git a/src/assets/images/icon-search.svg b/src/assets/images/icon-search.svg index 796283d..cbb1860 100644 --- a/src/assets/images/icon-search.svg +++ b/src/assets/images/icon-search.svg @@ -1,6 +1,4 @@ - - + d="m 35.826055,60.434903 5.75193,4.415356 c 0.998045,0.766128 1.184879,2.186554 0.418913,3.184809 L 18.914717,98.117182 c -0.765969,0.998256 -2.186094,1.185131 -3.18414,0.418997 L 9.9786472,94.120827 C 8.9806032,93.354698 8.7937692,91.934273 9.5597392,90.936014 L 32.641919,60.853903 c 0.765967,-0.998254 2.186091,-1.185129 3.184136,-0.419 z" /> diff --git a/src/components/Buttons/ButtonSearch/ButtonSearch.tsx b/src/components/Buttons/ButtonSearch/ButtonSearch.tsx index a2635aa..be5a9bc 100644 --- a/src/components/Buttons/ButtonSearch/ButtonSearch.tsx +++ b/src/components/Buttons/ButtonSearch/ButtonSearch.tsx @@ -1,5 +1,4 @@ -import CloseIcon from '@assets/images/icon-close.svg'; -import SearchIcon from '@assets/images/icon-search.svg'; +import { CloseIcon, SearchIcon } from '@components/Icons'; import { t } from '@lingui/macro'; import { SetStateAction } from 'react'; import styles from '../Buttons.module.scss'; diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss index a043649..fb93d5a 100644 --- a/src/components/Buttons/Buttons.module.scss +++ b/src/components/Buttons/Buttons.module.scss @@ -82,10 +82,10 @@ } .search { - display: flex; - place-content: center; + display: block; width: var(--btn-size); height: var(--btn-size); + padding: 0; background: none; border: none; font-size: var(--font-size-md); @@ -103,7 +103,10 @@ .front, .back { - display: block; + display: flex; + place-content: center; + width: var(--btn-size); + height: var(--btn-size); position: absolute; top: 0; right: 0; diff --git a/src/components/Icons/Blog/Blog.module.scss b/src/components/Icons/Blog/Blog.module.scss new file mode 100644 index 0000000..d5c2639 --- /dev/null +++ b/src/components/Icons/Blog/Blog.module.scss @@ -0,0 +1,23 @@ +@use "@styles/abstracts/functions" as fun; + +.icon { + display: block; + margin: auto; + width: var(--icon-size, #{fun.convert-px(40)}); +} + +.lines { + fill: var(--color-fg); + stroke-width: 4; +} + +.picture { + fill: var(--color-primary-lighter); + stroke: var(--color-border); +} + +.background { + fill: var(--color-bg); + stroke: var(--color-border); + stroke-width: 4; +} diff --git a/src/components/Icons/Blog/Blog.tsx b/src/components/Icons/Blog/Blog.tsx new file mode 100644 index 0000000..bd32111 --- /dev/null +++ b/src/components/Icons/Blog/Blog.tsx @@ -0,0 +1,62 @@ +import styles from './Blog.module.scss'; + +const BlogIcon = () => { + return ( + + + + + + + + + + + + + + + ); +}; + +export default BlogIcon; diff --git a/src/components/Icons/CV/CV.module.scss b/src/components/Icons/CV/CV.module.scss new file mode 100644 index 0000000..448bac6 --- /dev/null +++ b/src/components/Icons/CV/CV.module.scss @@ -0,0 +1,53 @@ +@use "@styles/abstracts/functions" as fun; + +.icon { + display: block; + margin: auto; + width: var(--icon-size, #{fun.convert-px(40)}); +} + +.lock { + fill: var(--color-bg); + stroke: var(--color-border); + stroke-width: 3; +} + +.lines { + stroke-width: 4; +} + +.seal-top { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 2; +} + +.seal-bottom { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 2; +} + +.diploma { + fill: var(--color-bg); + stroke: var(--color-border); + stroke-width: 4; +} + +.top { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 4; +} + +.handle { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 3; +} + +.bottom { + fill: var(--color-primary); + stroke: var(--color-border); + stroke-width: 4; +} diff --git a/src/components/Icons/CV/CV.tsx b/src/components/Icons/CV/CV.tsx new file mode 100644 index 0000000..0672ac4 --- /dev/null +++ b/src/components/Icons/CV/CV.tsx @@ -0,0 +1,58 @@ +import styles from './CV.module.scss'; + +const CVIcon = () => { + return ( + + + + + + + + + + + + + + ); +}; + +export default CVIcon; diff --git a/src/components/Icons/Close/Close.module.scss b/src/components/Icons/Close/Close.module.scss new file mode 100644 index 0000000..235991c --- /dev/null +++ b/src/components/Icons/Close/Close.module.scss @@ -0,0 +1,13 @@ +@use "@styles/abstracts/functions" as fun; + +.icon { + display: block; + margin: auto; + width: var(--icon-size, #{fun.convert-px(40)}); +} + +.line { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 3; +} diff --git a/src/components/Icons/Close/Close.tsx b/src/components/Icons/Close/Close.tsx new file mode 100644 index 0000000..0e7dab7 --- /dev/null +++ b/src/components/Icons/Close/Close.tsx @@ -0,0 +1,22 @@ +import styles from './Close.module.scss'; + +const CloseIcon = () => { + return ( + + + + + ); +}; + +export default CloseIcon; diff --git a/src/components/Icons/Contact/Contact.module.scss b/src/components/Icons/Contact/Contact.module.scss new file mode 100644 index 0000000..cf4b03e --- /dev/null +++ b/src/components/Icons/Contact/Contact.module.scss @@ -0,0 +1,29 @@ +@use "@styles/abstracts/functions" as fun; + +.icon { + display: block; + margin: auto; + width: var(--icon-size, #{fun.convert-px(40)}); +} + +.envelop { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 4; +} + +.lines { + fill: var(--color-border); +} + +.background { + fill: var(--color-shadow-dark); + stroke: var(--color-border); + stroke-width: 4; +} + +.paper { + fill: var(--color-bg); + stroke: var(--color-border); + stroke-width: 4; +} diff --git a/src/components/Icons/Contact/Contact.tsx b/src/components/Icons/Contact/Contact.tsx new file mode 100644 index 0000000..19295d0 --- /dev/null +++ b/src/components/Icons/Contact/Contact.tsx @@ -0,0 +1,54 @@ +import styles from './Contact.module.scss'; + +const ContactIcon = () => { + return ( + + + + + + + + + + + + + ); +}; + +export default ContactIcon; diff --git a/src/components/Icons/Hamburger/Hamburger.module.scss b/src/components/Icons/Hamburger/Hamburger.module.scss index 1ae01bb..5916e8c 100644 --- a/src/components/Icons/Hamburger/Hamburger.module.scss +++ b/src/components/Icons/Hamburger/Hamburger.module.scss @@ -6,17 +6,17 @@ &, &::before, &::after { - background: var(--color-primary); + background: var(--color-primary-lighter); background-image: linear-gradient( to right, var(--color-primary-light) 0%, - var(--color-highlight) 100% + var(--color-primary-lighter) 100% ); border: fun.convert-px(1) solid var(--color-border); border-radius: fun.convert-px(3); display: block; width: var(--btn-size, fun.convert-px(50)); - height: fun.convert-px(6); + height: fun.convert-px(7); margin: auto; transition: all 0.25s ease-in-out 0s, transform 0.4s ease-in 0s; } @@ -25,6 +25,7 @@ &::after { content: ""; position: absolute; + left: fun.convert-px(-1); } &::before { diff --git a/src/components/Icons/Home/Home.module.scss b/src/components/Icons/Home/Home.module.scss new file mode 100644 index 0000000..2e1df3a --- /dev/null +++ b/src/components/Icons/Home/Home.module.scss @@ -0,0 +1,42 @@ +@use "@styles/abstracts/functions" as fun; + +.icon { + display: block; + margin: auto; + width: var(--icon-size, #{fun.convert-px(40)}); +} + +.wall { + fill: var(--color-bg); + stroke: var(--color-border); + stroke-width: 4; +} + +.indoor { + fill: var(--color-shadow); + stroke: var(--color-border); + stroke-width: 4; +} + +.door { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 4; +} + +.roof { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 4; +} + +.chimney { + fill: var(--color-bg); + stroke: var(--color-border); + stroke-width: 4; +} + +.lines { + fill: var(--color-border); + stroke-width: 4; +} diff --git a/src/components/Icons/Home/Home.tsx b/src/components/Icons/Home/Home.tsx new file mode 100644 index 0000000..11c0c8c --- /dev/null +++ b/src/components/Icons/Home/Home.tsx @@ -0,0 +1,42 @@ +import styles from './Home.module.scss'; + +const HomeIcon = () => { + return ( + + + + + + + + + + ); +}; + +export default HomeIcon; diff --git a/src/components/Icons/Search/Search.module.scss b/src/components/Icons/Search/Search.module.scss new file mode 100644 index 0000000..5016ae1 --- /dev/null +++ b/src/components/Icons/Search/Search.module.scss @@ -0,0 +1,31 @@ +@use "@styles/abstracts/functions" as fun; + +.icon { + display: block; + margin: auto; + width: var(--icon-size, #{fun.convert-px(40)}); +} + +.big-handle { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 3; +} + +.glass { + fill: var(--color-bg-opacity); + stroke: var(--color-border); + stroke-width: 2; +} + +.upright { + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 3; +} + +.small-handle { + fill: var(--color-primary); + stroke: var(--color-border); + stroke-width: 2; +} diff --git a/src/components/Icons/Search/Search.tsx b/src/components/Icons/Search/Search.tsx new file mode 100644 index 0000000..abb7b53 --- /dev/null +++ b/src/components/Icons/Search/Search.tsx @@ -0,0 +1,30 @@ +import styles from './Search.module.scss'; + +const SearchIcon = () => { + return ( + + + + + + + ); +}; + +export default SearchIcon; diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx index da4e029..b32c3d3 100644 --- a/src/components/Icons/index.tsx +++ b/src/components/Icons/index.tsx @@ -1,3 +1,17 @@ +import BlogIcon from './Blog/Blog'; +import CloseIcon from './Close/Close'; +import ContactIcon from './Contact/Contact'; +import CVIcon from './CV/CV'; import HamburgerIcon from './Hamburger/Hamburger'; +import HomeIcon from './Home/Home'; +import SearchIcon from './Search/Search'; -export { HamburgerIcon }; +export { + BlogIcon, + CloseIcon, + ContactIcon, + CVIcon, + HamburgerIcon, + HomeIcon, + SearchIcon, +}; diff --git a/src/components/MainNav/MainNav.module.scss b/src/components/MainNav/MainNav.module.scss index d732b99..8bd730f 100644 --- a/src/components/MainNav/MainNav.module.scss +++ b/src/components/MainNav/MainNav.module.scss @@ -3,6 +3,8 @@ @use "@styles/abstracts/placeholders"; .wrapper { + --icon-size: #{fun.convert-px(25)}; + display: flex; flex-flow: column nowrap; place-items: center; @@ -17,6 +19,8 @@ } @include mix.dimensions("md") { + --icon-size: #{fun.convert-px(30)}; + width: unset; height: unset; } @@ -123,18 +127,6 @@ } } -.icon { - display: block; - width: fun.convert-px(25); - margin: auto; - - @include mix.media("screen") { - @include mix.dimensions("md") { - width: fun.convert-px(30); - } - } -} - .checkbox:not(:checked) { ~ .nav { opacity: 0; diff --git a/src/components/MainNav/MainNav.tsx b/src/components/MainNav/MainNav.tsx index eb44e77..0f5147b 100644 --- a/src/components/MainNav/MainNav.tsx +++ b/src/components/MainNav/MainNav.tsx @@ -1,12 +1,14 @@ import { SetStateAction } from 'react'; import Link from 'next/link'; import { t } from '@lingui/macro'; -import { HamburgerIcon } from '@components/Icons'; +import { + BlogIcon, + ContactIcon, + CVIcon, + HamburgerIcon, + HomeIcon, +} from '@components/Icons'; import { mainNav } from '@config/nav'; -import ArticlesIcon from '@assets/images/icon-articles.svg'; -import ContactIcon from '@assets/images/icon-contact.svg'; -import CVIcon from '@assets/images/icon-cv.svg'; -import HomeIcon from '@assets/images/icon-home.svg'; import styles from './MainNav.module.scss'; const MainNav = ({ @@ -21,7 +23,7 @@ const MainNav = ({ case 'home': return ; case 'blog': - return ; + return ; case 'contact': return ; case 'cv': @@ -36,7 +38,7 @@ const MainNav = ({
  • - {getIcon(item.id)} + {getIcon(item.id)} {item.name} diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss index cd66341..441b20c 100644 --- a/src/styles/base/_colors.scss +++ b/src/styles/base/_colors.scss @@ -12,7 +12,6 @@ --color-primary-dark: #{var.$color_blue-dark}; --color-border: #{var.$color_grey-dark}; --color-border-light: #{var.$color_grey}; - --color-highlight: #{var.$color_blue-brighter}; --color-shadow: #{var.$color_grey-dark-o70}; --color-shadow-light: #{var.$color_grey-dark-o40}; --color-shadow-lighter: #{var.$color_grey-dark-o20}; -- cgit v1.2.3