natemoo-re / astro-icon

Inline and sprite-based SVGs in Astro made easy!
https://astroicon.dev
Other
992 stars 57 forks source link

Icons not found in Build but are in Dev #139

Closed NexRX closed 8 months ago

NexRX commented 10 months ago

Hi, I just got started with Astro yesterday and im trying to bootstrap an app. Everything was building fine untill I tried to build with astro-icons.

In astro dev everything will load and run fine, but running astro build will fail with the following error:

▶ src/pages/index.astro
<redacted_repo_path>/dist/chunks/pages/index.astro.eef02e3c.mjs:262
      throw new Error(`[astro-icon] Unable to load icon "${name}"!
            ^

Error: [astro-icon] Unable to load icon "ri:bit-coin-fill"!
Error: Unknown builtin plugin "cleanupIDs" specified.
    at file://<redacted_repo_path>/dist/chunks/pages/index.astro.eef02e3c.mjs:262:13
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async AstroComponentInstance.render (file:///<redacted_repo_path>/dist/chunks/astro.5863987e.mjs:957:7)
    at async Object.render (file:///<redacted_repo_path>/dist/chunks/astro.5863987e.mjs:1410:7)
    at async renderChild (file:///<redacted_repo_path>/dist/chunks/astro.5863987e.mjs:919:5)

Node.js v18.16.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

In my src/pages/index.astro im using the icons as such:

---
import RootLayout from "../layouts/RootLayout.astro";
import Card from "../components/Card.astro";
import { Icon } from "astro-icon";
---
...
      <Icon name="ri:user-5-fill" class="max-h-[32px]" />
      <Icon name="ri:upload-cloud-2-fill" class="max-h-[32px]" />
      <Icon name="ri:ubuntu-fill" class="max-h-[32px]" />
...

Is it something I am doing? I saw an old issue with the same problem as me and followed the steps that fixed it at the time but they no longer work and so i rolled them back (like the last comment says to) Issue: https://github.com/natemoo-re/astro-icon/issues/2

If it helps, here is my package.json deps:

"dependencies": {
    "@astrojs/image": "^0.17.3",
    "@astrojs/tailwind": "^4.0.0",
    "astro": "^2.10.14",
    "astro-compress": "^2.0.14",
    "astro-icon": "^0.8.1",
    "astro-robots-txt": "^0.5.0",
    "sass": "^1.66.1",
    "tailwindcss": "^3.0.24"
  },
  "devDependencies": {
    "sharp": "^0.32.5"
  }
NexRX commented 10 months ago

I fixed this by doing the following after reading several issues here:

1) yarn add astro-icon@next 2) yarn add @iconify-json/ri 3) Change my astro.config.mjs to include:

import icon from "astro-icon";

export default defineConfig({
  integrations: [icon({
      iconDir: "src/assets/icons",
      include: {
        ri: ["*"],
      },
    }),
  ],
});

3) Change my import of Icon: to

import { Icon } from "astro-icon/components";

I also upgraded to Astro 3 but i dont think that played a part, was still broken prior to the actions above. Anyone can explain why the documented installation method didnt work for me?