iconify

webdoky · Feb 7, 2024 · adb2283 · adb2283
1 parent 2b62ca2
commit adb2283
Show file tree

Hide file tree

Showing 6 changed files with 298 additions and 21 deletions.
diff --git a/astro.config.ts b/astro.config.ts
@@ -3,6 +3,7 @@ import react from '@astrojs/react';
 import astroSitemap from '@astrojs/sitemap';
 import tailwind from '@astrojs/tailwind';
 import astroCritters from 'astro-critters';
+import icon from 'astro-icon';
 import { defineConfig } from 'astro/config';
 import astroServiceWorker from 'astrojs-service-worker';
 import { config as dotenvConfig } from 'dotenv';
@@ -17,7 +18,9 @@ export default defineConfig({
   // compressHTML: false,
   integrations: [
     import.meta.env.MODE === 'production' ? astroServiceWorker() : undefined,
-    astroSitemap({ serialize: serializeSitemapItem }),
+    astroSitemap({
+      serialize: serializeSitemapItem,
+    }),
     astroCritters({
       Logger: 1,
     }),
@@ -28,6 +31,7 @@ export default defineConfig({
         forward: ['dataLayer.push'],
       },
     }),
+    icon(),
   ],
   markdown: {
     rehypePlugins: rehypePlugins,

diff --git a/package.json b/package.json
@@ -22,10 +22,12 @@
     "@astrojs/react": "~3.0.9",
     "@astrojs/sitemap": "~3.0.5",
     "@astrojs/tailwind": "~5.1.0",
+    "@iconify-json/mdi": "^1.1.64",
     "@tailwindcss/typography": "0.5.10",
     "astro": "~4.2.5",
     "astro-breadcrumbs": "~2.0.2",
     "astro-critters": "~2.0.11",
+    "astro-icon": "~1.1.0",
     "astro-seo": "0.8.0",
     "astrojs-service-worker": "~2.0.0",
     "classnames": "~2.5.1",
@@ -107,4 +109,4 @@
     "ts-node": "~10.9.2",
     "vfile": "~6.0.1"
   }
-}
+}
diff --git a/src/layouts/Layout/assets/globeIcon.svg b/src/layouts/Layout/assets/globeIcon.svg
diff --git a/src/layouts/Layout/components/Footer.astro b/src/layouts/Layout/components/Footer.astro
@@ -1,5 +1,6 @@
 ---
-import globeIcon from '../assets/globeIcon.svg';
+import { Icon } from 'astro-icon/components';
+
 export interface Props {
   originalLink?: string;
   originalPath?: string;
@@ -100,7 +101,7 @@ const { originalLink, originalPath, originalTitle } = Astro.props;
               rel="noopener noreferrer"
               title={`MDN: "${originalTitle}"`}>
               <span>Оригінал статті</span>
-              <img alt="" src={globeIcon.src} class="m-1" />
+              <Icon name="mdi:globe" class="ml-1" />
             </a>
           </div>
         )

diff --git a/src/layouts/Layout/components/Header.astro b/src/layouts/Layout/components/Header.astro
@@ -1,5 +1,6 @@
 ---
-import IconWrapper from '../../../components/IconWrapper.astro';
+import { Icon } from 'astro-icon/components';
+
 import Logo from '../../../components/Logo.astro';
 
 import ToggleDarkMode from './ToggleDarkMode.jsx';
@@ -58,12 +59,7 @@ const GITHUB_LINK = 'https://github.com/webdoky';
           target="_blank"
           rel="noopener noreferrer"
           title="Ми на GitHub">
-          <IconWrapper size={1.7}>
-            <path fill="none" d="M0 0h24v24H0z"></path>
-            <path
-              d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588-.094-.117.34.427.433.539.19.227.33.365.44.438.204.137.587.196 1.15.14.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308 1.477-.933 2.613-1.226 3.422-1.096.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19.691.936 1.058 2.045 1.058 3.293 0 3.757-1.674 5.665-4.642 6.392.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716 1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446.005-.705c.005-.708.007-1.338.007-1.998 0-.697-.183-1.152-.425-1.36-.661-.57-.326-1.655.54-1.752 2.967-.333 4.337-1.482 4.337-4.66 0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66.865.097 1.201 1.177.544 1.748-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z"
-            ></path>
-          </IconWrapper>
+          <Icon name="mdi:github" class="w-6 h-6" />
         </a>
 
         <ToggleDarkMode client:idle />