Merge pull request #89 from Ticolyle/feature/update-astro-icon-to-v1-…

…and-svgo

Feature: Update `astro-icon` to v1 and svgo

astro.config.mjs

@@ -2,11 +2,12 @@ import { defineConfig } from 'astro/config'
 import mdx from '@astrojs/mdx'
 import tailwind from '@astrojs/tailwind'
 import compress from 'astro-compress'
+import icon from "astro-icon"
 
 // https://astro.build/config
 export default defineConfig({
   compressHTML: true,
-  integrations: [mdx(), tailwind({
+  integrations: [mdx(), icon(), tailwind({
     applyBaseStyles: false,
   }), compress()],
 })

package.json

@@ -14,20 +14,22 @@
     "@astrojs/mdx": "^2.0.2",
     "@astrojs/partytown": "^2.0.2",
     "@astrojs/tailwind": "^5.0.4",
+    "@iconify-json/ion": "^1.1.15",
+    "@iconify-json/mdi": "^1.1.64",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.50.0",
     "accessible-astro-components": "^2.3.3",
     "astro": "^4.0.7",
     "astro-compress": "^2.0.6",
-    "astro-icon": "^0.7.3",
+    "astro-icon": "^1.0.2",
     "eslint": "^8.33.0",
     "eslint-plugin-astro": "^0.23.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "prettier": "^2.8.3",
     "prettier-plugin-astro": "^0.8.0",
     "prettier-plugin-tailwindcss": "^0.2.2",
     "sass": "^1.49.9",
-    "svgo": "^2.8.0",
+    "svgo": "^3.2.0",
     "tailwindcss": "^3.2.7"
   }
 }

src/assets/scss/base/_button.scss

@@ -134,7 +134,8 @@
     align-items: center;
     gap: 0.5rem;
 
-    [astro-icon] {
+    [data-icon] {
+      height: auto;
       width: 30px;
     }
   }

src/components/Feature.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon'
+import { Icon } from 'astro-icon/components'
 
 const { icon = 'mdi:rocket', title = 'Title' } = Astro.props
 ---
@@ -54,7 +54,8 @@ const { icon = 'mdi:rocket', title = 'Title' } = Astro.props
     }
   }
 
-  :global(.feature [astro-icon]) {
+  :global(.feature [data-icon]) {
+    height: auto;
     width: 4rem;
     color: var(--action-color);
   }

src/components/Header.astro

@@ -1,7 +1,7 @@
 ---
 import Navigation from '../components/Navigation.astro'
 import { SkipLinks } from 'accessible-astro-components'
-import { Icon } from 'astro-icon'
+import { Icon } from 'astro-icon/components'
 ---
 
 <header>
@@ -32,7 +32,7 @@ import { Icon } from 'astro-icon'
     </li>
     <li class="menu-item type-icon">
       <a href="https://github.com/markteekman/accessible-astro-starter" title="Go to the GitHub page">
-        <Icon pack="ion" name="logo-github" />
+        <Icon name="ion:logo-github" />
       </a>
     </li>
   </Navigation>
@@ -45,7 +45,8 @@ import { Icon } from 'astro-icon'
     .type-icon a {
       display: block;
 
-      [astro-icon] {
+      [data-icon] {
+        height: auto;
         margin-top: -4px;
         width: 30px;
 
@@ -55,7 +56,7 @@ import { Icon } from 'astro-icon'
       }
 
       &:hover {
-        [astro-icon] path {
+        [data-icon] path {
           fill: var(--action-color-state);
         }
       }

src/components/Hero.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon'
+import { Icon } from 'astro-icon/components'
 
 const { src = '/astronaut-hero-img.webp' } = Astro.props
 ---
@@ -13,14 +13,14 @@ const { src = '/astronaut-hero-img.webp' } = Astro.props
         </h1>
         <div class="flex flex-col gap-3 min-[500px]:flex-row">
           <a class="button has-icon" href="https://github.com/markteekman/accessible-astro-starter">
-            <Icon pack="ion" name="star-outline" />
+            <Icon name="ion:star-outline" />
             Star on GitHub
           </a>
           <a
             class="button has-icon color-secondary"
             href="https://github.com/markteekman/accessible-astro-starter/blob/main/README.md"
           >
-            <Icon pack="ion" name="bookmark-outline" />
+            <Icon name="ion:bookmark-outline" />
             Read the Docs
           </a>
         </div>

src/pages/accessible-components.astro

@@ -1,6 +1,6 @@
 ---
 import DefaultLayout from '../layouts/DefaultLayout.astro'
-import { Icon } from 'astro-icon'
+import { Icon } from 'astro-icon/components'
 import {
   Accordion,
   AccordionItem,
@@ -112,26 +112,26 @@ import {
         <div class="space-content">
           <h2>Notification</h2>
           <Notification>
-            <Icon pack="ion" name="notifications-outline" /><p><strong>Message:</strong> This is a notification!</p>
+            <Icon name="ion:notifications-outline" /><p><strong>Message:</strong> This is a notification!</p>
           </Notification>
           <Notification type="info">
-            <Icon pack="ion" name="information-circle-outline" /><p>
+            <Icon name="ion:information-circle-outline" /><p>
               <strong>Info:</strong> This is a notification of type info.
             </p>
           </Notification>
           <Notification type="success">
-            <Icon pack="ion" name="checkbox-outline" /><p>
+            <Icon name="ion:checkbox-outline" /><p>
               <strong>Success:</strong> This is a notification of type success.
             </p>
           </Notification>
           <Notification type="warning">
-            <Icon pack="ion" name="warning-outline" /><p>
+            <Icon name="ion:warning-outline" /><p>
               <strong>Warning:</strong> This is a notification of type warning and goes on multiple lines to see how that
               looks.
             </p>
           </Notification>
           <Notification type="error">
-            <Icon pack="ion" name="alert-circle-outline" /><p>
+            <Icon name="ion:alert-circle-outline" /><p>
               <strong>Error:</strong> This is a notification of type error.
             </p>
           </Notification>

src/pages/mdx-page.mdx

@@ -3,13 +3,13 @@ layout: ../layouts/MarkdownLayout.astro
 title: MDX Page
 ---
 
-import { Icon } from 'astro-icon'
+import { Icon } from 'astro-icon/components'
 import { Notification } from 'accessible-astro-components'
 
 # MDX Page
 
 <Notification type="info">
-  <Icon pack="ion" name="information-circle-outline" />
+  <Icon name="ion:information-circle-outline" />
   <p>
     <strong>Info:</strong> This page utilizes Astro's MDX feature which let's you use components in a markdown file and
     supports out-of-the-box syntax highlighting with Shiki.