chore(homepage): add icons to some buttons

4 files changed, 32 insertions, 9 deletions

diff --git a/src/assets/images/icon-feed.svg b/src/assets/images/icon-feed.svg
new file mode 100644
index 0000000..fcdac1f
--- /dev/null
+++ b/src/assets/images/icon-feed.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="128px" height="128px" id="RSSicon" viewBox="0 0 256 256">
+<defs>
+<linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
+<stop offset="0.0" stop-color="#E3702D"/><stop offset="0.1071" stop-color="#EA7D31"/>
+<stop offset="0.3503" stop-color="#F69537"/><stop offset="0.5" stop-color="#FB9E3A"/>
+<stop offset="0.7016" stop-color="#EA7C31"/><stop offset="0.8866" stop-color="#DE642B"/>
+<stop offset="1.0" stop-color="#D95B29"/>
+</linearGradient>
+</defs>
+<rect width="256" height="256" rx="55" ry="55" x="0" y="0" fill="#CC5D15"/>
+<rect width="246" height="246" rx="50" ry="50" x="5" y="5" fill="#F49C52"/>
+<rect width="236" height="236" rx="47" ry="47" x="10" y="10" fill="url(#RSSg)"/>
+<circle cx="68" cy="189" r="24" fill="#FFF"/>
+<path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#FFF"/>
+<path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" fill="#FFF"/>
+<script xmlns=""/></svg>
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index da4be30..5fe423e 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -152,13 +152,6 @@
     margin-right: auto;
   }
 
-  &--icon {
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-    gap: var(--spacing-2xs);
-  }
-
   &:hover,
   &:focus {
     border-color: var(--color-primary-light);
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 886552c..99d506d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -9,6 +9,8 @@ import HomePageContent from '@content/pages/homepage.mdx';
 import { ButtonLink } from '@components/Buttons';
 import styles from '@styles/pages/Home.module.scss';
 import { t } from '@lingui/macro';
+import ContactIcon from '@assets/images/icon-contact.svg';
+import FeedIcon from '@assets/images/icon-feed.svg';
 
 const Home: NextPageWithLayout = () => {
   const CodingLinks = () => {
@@ -66,10 +68,16 @@ const Home: NextPageWithLayout = () => {
     return (
       <ul className={styles['links-list']}>
         <li>
-          <ButtonLink target="/contact">{t`Contact me`}</ButtonLink>
+          <ButtonLink target="/contact">
+            <ContactIcon className={styles.icon} />
+            {t`Contact me`}
+          </ButtonLink>
         </li>
         <li>
-          <ButtonLink target="/feed">{t`Subscribe`}</ButtonLink>
+          <ButtonLink target="/feed">
+            <FeedIcon className={styles.icon} />
+            {t`Subscribe`}
+          </ButtonLink>
         </li>
       </ul>
     );
diff --git a/src/styles/pages/Home.module.scss b/src/styles/pages/Home.module.scss
index 79ba251..b966b36 100644
--- a/src/styles/pages/Home.module.scss
+++ b/src/styles/pages/Home.module.scss
@@ -31,3 +31,7 @@
     }
   }
 }
+
+.icon {
+  width: fun.convert-px(20);
+}