Use in non-astro components?

[silveltman]

Can this be used in components other than .astro? Like .svelte, .vue etc.

I'm getting an error but not sure what the exact reason for this is

[yacosta738]

Hi, I am interested in use in other components. Is that possible?

[kissu]

I guess that we could use https://github.com/antfu/unplugin-icons for the other languages but it's indeed a bit counter-productive to have both to cover every extension.

[stramel]

You can use the Icon component in other framework components by utilizing the <slot /> feature.

https://docs.astro.build/en/core-concepts/framework-components/#can-i-use-astro-components-inside-my-framework-components

[kissu]

I will need to give that one a try!

[stramel]

@kissu here is an example using with React. https://stackblitz.com/edit/github-6zni2a?file=src/components/Card.jsx https://stackblitz.com/edit/github-6zni2a?file=src/pages/index.astro

[stramel]

Going to close this since this is possible. Feel free to comment if you're experiencing issues.

[wpplumber]

Welcome, is there a Vue 3 sample?

[Corentin7301]

@wpplumber Do you have find an example with Vue 3? I've the following problem:

| index.astro
| components
  | Slider.vue
  | Card.vue

I use a v-for in Slider and send data of card by props to Card. In this card, I would like to add icons but I don't find a solution for that...

[wpplumber]

Welcome @Corentin7301, I use unplugin now. 💪