rux-icon default library does not work well with routing about astro-components

[markacianfrani]

Is it still an issue if you use a slotted icon instead of the icon attribute?

  <rux-button>
    <rux-icon icon="settings"></rux-icon>
    Slotted icon button
  </rux-button>

What are you using for routing?

[moaxcp]

It only works when I set the library.

<rux-icon library="/icons/astro.svg" icon="settings"></rux-icon>

I could have this all installed wrong though. I'm using vuejs with vue-router. The project is located here. https://github.com/moaxcp/vue-astro

[markacianfrani]

Gotcha! You've got everything setup correctly and you're right that relative path is causing the issue. In the short term, I'd recommend just setting the library manually like you are there. This will be fixed in our upcoming release at the end of September. You can start using the new components now if you're interested

https://next--astro-stencil.netlify.app/
https://github.com/RocketCommunicationsInc/astro-components-stencil

For the specific example:
npm i @astrouxds/astro-web-components

and in your main.js

import { RuxButton } from '@astrouxds/astro-web-components/dist/components/rux-button';
import { RuxIcon } from '@astrouxds/astro-web-components/dist/components/rux-icon';
import { RuxIconSettings } from '@astrouxds/astro-web-components/dist/components/rux-icon-settings';
customElements.define('rux-button', RuxButton)
customElements.define('rux-icon', RuxIcon)
customElements.define('rux-icon-settings', RuxIconSettings)