From 6f002fab7d894d229f71bb103338cd14e68607bb Mon Sep 17 00:00:00 2001 From: Lyle Reed Date: Tue, 9 Jan 2024 19:18:27 -0600 Subject: [PATCH 1/6] Update packages and install needed Iconify icon packs - astro-icon 0.7.3 => 1.0.2 - svgo 2.8.0 => 3.2.0 --- package.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index c223ddd..6e96b64 100644 --- a/package.json +++ b/package.json @@ -14,12 +14,14 @@ "@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", @@ -27,7 +29,7 @@ "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" } } From b9ee376064af21fc2ef3d1bad2ee358234f72c41 Mon Sep 17 00:00:00 2001 From: Lyle Reed Date: Tue, 9 Jan 2024 19:18:54 -0600 Subject: [PATCH 2/6] Add icon integration to astro config --- astro.config.mjs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/astro.config.mjs b/astro.config.mjs index 8140cc7..5a267f1 100644 --- a/astro.config.mjs +++ b/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()], }) From 3e6a8747d3bb1399900d52d261ee4c2d295206f6 Mon Sep 17 00:00:00 2001 From: Lyle Reed Date: Tue, 9 Jan 2024 19:19:22 -0600 Subject: [PATCH 3/6] Update astro-icon component imports --- src/components/Feature.astro | 2 +- src/components/Header.astro | 2 +- src/components/Hero.astro | 2 +- src/pages/accessible-components.astro | 2 +- src/pages/mdx-page.mdx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Feature.astro b/src/components/Feature.astro index 351a11a..cf87f3c 100644 --- a/src/components/Feature.astro +++ b/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 --- diff --git a/src/components/Header.astro b/src/components/Header.astro index 8da7be6..4731a21 100644 --- a/src/components/Header.astro +++ b/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' ---
diff --git a/src/components/Hero.astro b/src/components/Hero.astro index 3a33d51..85089b2 100644 --- a/src/components/Hero.astro +++ b/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 --- diff --git a/src/pages/accessible-components.astro b/src/pages/accessible-components.astro index 37be575..62e17df 100644 --- a/src/pages/accessible-components.astro +++ b/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, diff --git a/src/pages/mdx-page.mdx b/src/pages/mdx-page.mdx index 249a420..193f7aa 100644 --- a/src/pages/mdx-page.mdx +++ b/src/pages/mdx-page.mdx @@ -3,7 +3,7 @@ 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 From 0b9d6937f2062e643942e05e1e478f57c78dcd59 Mon Sep 17 00:00:00 2001 From: Lyle Reed Date: Tue, 9 Jan 2024 19:23:20 -0600 Subject: [PATCH 4/6] Remove astro-icon `pack` prop Replaced the no longer used `pack` property with the new `name` property syntax. --- src/components/Header.astro | 2 +- src/components/Hero.astro | 4 ++-- src/pages/accessible-components.astro | 10 +++++----- src/pages/mdx-page.mdx | 2 +- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index 4731a21..7f8daba 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -32,7 +32,7 @@ import { Icon } from 'astro-icon/components'
  • - +
    • diff --git a/src/components/Hero.astro b/src/components/Hero.astro index 85089b2..b24df03 100644 --- a/src/components/Hero.astro +++ b/src/components/Hero.astro @@ -13,14 +13,14 @@ const { src = '/astronaut-hero-img.webp' } = Astro.props
    - + Star on GitHub - + Read the Docs
    diff --git a/src/pages/accessible-components.astro b/src/pages/accessible-components.astro index 62e17df..5eda212 100644 --- a/src/pages/accessible-components.astro +++ b/src/pages/accessible-components.astro @@ -112,26 +112,26 @@ import {

    Notification

    -

    Message: This is a notification!

    +

    Message: This is a notification!

     -

    +

    Info: This is a notification of type info.

    -

    +

    Success: This is a notification of type success.

    -

    +

    Warning: This is a notification of type warning and goes on multiple lines to see how that looks.

    -

    +

    Error: This is a notification of type error.

    diff --git a/src/pages/mdx-page.mdx b/src/pages/mdx-page.mdx index 193f7aa..64a9db1 100644 --- a/src/pages/mdx-page.mdx +++ b/src/pages/mdx-page.mdx @@ -9,7 +9,7 @@ import { Notification } from 'accessible-astro-components' # MDX Page - +

    Info: 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. From 679a80ea03baf50c2035a1d4c6ae3489e2f9c00b Mon Sep 17 00:00:00 2001 From: Lyle Reed Date: Tue, 9 Jan 2024 19:29:50 -0600 Subject: [PATCH 5/6] Replace any `[astro-icon]` selectors with `[data-icon]` selector. --- src/assets/scss/base/_button.scss | 2 +- src/components/Feature.astro | 2 +- src/components/Header.astro | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/assets/scss/base/_button.scss b/src/assets/scss/base/_button.scss index 0b35a99..cd282c3 100644 --- a/src/assets/scss/base/_button.scss +++ b/src/assets/scss/base/_button.scss @@ -134,7 +134,7 @@ align-items: center; gap: 0.5rem; - [astro-icon] { + [data-icon] { width: 30px; } } diff --git a/src/components/Feature.astro b/src/components/Feature.astro index cf87f3c..aa26de9 100644 --- a/src/components/Feature.astro +++ b/src/components/Feature.astro @@ -54,7 +54,7 @@ const { icon = 'mdi:rocket', title = 'Title' } = Astro.props } } - :global(.feature [astro-icon]) { + :global(.feature [data-icon]) { width: 4rem; color: var(--action-color); } diff --git a/src/components/Header.astro b/src/components/Header.astro index 7f8daba..4e1e225 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -45,7 +45,7 @@ import { Icon } from 'astro-icon/components' .type-icon a { display: block; - [astro-icon] { + [data-icon] { margin-top: -4px; width: 30px; @@ -55,7 +55,7 @@ import { Icon } from 'astro-icon/components' } &:hover { - [astro-icon] path { + [data-icon] path { fill: var(--action-color-state); } } From dec9ca626dc7ffff2376c8e4130c0215c57dee9f Mon Sep 17 00:00:00 2001 From: Lyle Reed Date: Tue, 9 Jan 2024 19:34:21 -0600 Subject: [PATCH 6/6] Adjust icon CSS styling to match expected site design --- src/assets/scss/base/_button.scss | 1 + src/components/Feature.astro | 1 + src/components/Header.astro | 1 + 3 files changed, 3 insertions(+) diff --git a/src/assets/scss/base/_button.scss b/src/assets/scss/base/_button.scss index cd282c3..b205d4a 100644 --- a/src/assets/scss/base/_button.scss +++ b/src/assets/scss/base/_button.scss @@ -135,6 +135,7 @@ gap: 0.5rem; [data-icon] { + height: auto; width: 30px; } } diff --git a/src/components/Feature.astro b/src/components/Feature.astro index aa26de9..98cc7fb 100644 --- a/src/components/Feature.astro +++ b/src/components/Feature.astro @@ -55,6 +55,7 @@ const { icon = 'mdi:rocket', title = 'Title' } = Astro.props } :global(.feature [data-icon]) { + height: auto; width: 4rem; color: var(--action-color); } diff --git a/src/components/Header.astro b/src/components/Header.astro index 4e1e225..7106f96 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -46,6 +46,7 @@ import { Icon } from 'astro-icon/components' display: block; [data-icon] { + height: auto; margin-top: -4px; width: 30px;