Astro 4.0.3 Upgrade | Astro-Icon unable to load

Problem

As of today Astro version 4.0.3 Src: ¹ was released and wanted to upgrade my current version of 3.6.4. Before doing that I first made a back-up, due it being a version upgrade from 3 to 4. After that started upgrading my below integrations before upgrading to Astro 4:

1. astrojs/react
2. astrojs/sitemap
3. astrojs/tailwind
4. astrojs/vue
5. astrojs/rss

PS C:\Users\flapp\WEB\ASTRO\_ASTRO BACKUPS\masscom-media-september> npx @astrojs/upgrade

 astro   Integration upgrade in progress.

      ◼  @astrojs/react is up to date on v3.0.7
      ◼  @astrojs/rss is up to date on v4.0.1
      ◼  @astrojs/sitemap is up to date on v3.0.3
      ◼  @astrojs/tailwind is up to date on v5.0.3
      ◼  @astrojs/vue is up to date on v4.0.2
      ▲  astro will be updated to  v4.0.3 

  wait   One package has breaking changes. Continue?
         Yes

 check   Be sure to follow the CHANGELOG.
         astro https://docs.astro.build/en/guides/upgrade-to/v4/

      ✔  Installed dependencies!

+—————+  Houston:
| ^ u ^  See you around, astronaut.
+—————+
PS C:\Users\flapp\WEB\ASTRO\_ASTRO BACKUPS\masscom-media-september> npm run dev

> astro-landing-page@0.0.1 dev
> astro dev


 astro  v4.0.3 ready in 4537 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

09:34:31 watching for file changes...
09:34:48 [200] / 127ms

Nice, that went smooth. However it did came with an issue after loading my page:

Solution

Remove and install astro-icon again:

1. npm remove astro-icon
2. npm i astro-icon

That was actually fairly simple, nice to start a day without issues and a nice cuppa coffee.

Read/Learn more about the Astro framework:

Astroverse - The official Astro Blog

• NOTE: main image is also taken from their blog.