#Astro-icon all Icons are the same

3 messages · Page 1 of 1 (latest)

dense breach
#

I'm using the astro-icon package for displaying icons.
All my <Icon> instances have the same icon as the first declared one despite me clearly passing them different svg files.
I'm supposed to have a scholar-hat icon, followed by a caret-down icon and an arrow-right icon at the bottom, but it's all scholar-hat icons.
Here's my code:

---
import { Icon } from 'astro-icon/components'
import Link from './Link.astro';

interface Props {
    textHeader?: string;
    icon?: string;
    iconExpand?: string;
    iconCollapse?: string;
    textLink?: string;
    url?: string;
}

const { textHeader = 'Dropdown', icon = 'scholar-hat', iconExpand = 'caret-down', iconCollapse = 'caret-up', textLink = 'Link', url = '#'} = Astro.props;
---

<div class={`dropdown`}>
    <div class="flex items-center">
        <Icon name=`${icon}` class="dropdown-svg"/>
        <div class="ml-3 mr-3">{textHeader}</div>
        <Icon name=`${iconCollapse}` class="ml-auto dropdown-svg"/>
    </div>
    <div class="dropdown-contents">
        <Link text=`${textLink}` url=`${url}`>  <!-- Link custom component has icon inside with icon 'arrow-right' -->
    </div>
</div>

What's wrong?

drowsy parrotBOT
#

Hi @dense breach. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the knowledge sources provided, it's not clear why all your icons are displaying as the first declared one. However, there are a few things you could check:

  1. Ensure that the astro-icon package is correctly installed and updated. You can check the version of Astro you're using by looking at the Astro Info in your project settings.

  2. Check if there are any known issues with the astro-icon package or Astro itself that could be causing this behavior. You can do this by visiting the Astro GitHub issues page (https://github.com/withastro/astro/issues).

  3. Make sure that the SVG files you're using are correctly formatted and not corrupted. You can test this by trying to display them individually outside of the Icon component.

  4. Check your usage of the Icon component. In the Astro documentation (https://docs.astro.build/en/reference/dev-toolbar-app-reference#astro-dev-toolbar-icon), it's shown that the Icon component takes an icon attribute to specify the icon to display. In your code, you're using name instead of icon. This could be causing the issue if astro-icon expects the icon attribute.

  5. If you're dynamically importing icons, Astro might not be able to detect which icons are used and could be defaulting to including all of them in the final bundle. This is mentioned in a GitHub issue (https://github.com/withastro/astro/issues/5599) about assets from node_modules not getting copied to the output folder.

If none of these suggestions solve your issue, you might want to consider asking for help on the Astro community forums or opening a new issue on the Astro GitHub page.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: