Use in non-astro components?

[natemoo-re]

Use in non-astro components?

[wpplumber]

Welcome, is there a Vue 3 sample?

[wpplumber]

Welcome @Corentin7301, I use unplugin now. 💪

[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.

[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...