Astro 4.0.3 Upgrade | Astro-Icon unable to load

MassCom Media | Space in the Cloud | 大阪市

A solution for (almost) everything

MassCom Media


As of today Astro version 4.0.3 Src: 1 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?

 check   Be sure to follow the CHANGELOG.

      ✔  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:

Error: [astro-icon] Unable to load "/src/icons/all-of-them.svg". Does the file exist? at Module.load [as default] ... ... ...


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.


  1. GitHub- Astro releases