There are a lot of awesome icon sets out there, but the set from the Ionic framework - Ionicons - is still one of my favorites. It surely is a matt...
For further actions, you may consider blocking this person and/or reporting abuse
If you're using interiajs or something else with vite, I had to do this:
Hopefully useful for someone :)
I believe that is the current recommended approach, but I agree that it isn't as clean as it could be. A Vue component to wrap the Ionicons component might make it feel more integrated, but I have not done that before. This approach also works with any Web Component, not just Ionicons.
Ionic is working on a way to have Stencil output targets with framework bindings because including Web Components in frameworks can be awkward, so that will streamline the process a little more and make them seem more like they belong in the framework app. Unfortunately, the Vue version has not had progress on it compared to Angular and React, but it is on their list.
Thank you very much for this detailed statement! Glad to know that I'm not doing something weird 😅 Let's hope that there will be some progress for Vue soon.
Had to tweak the module import to:
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
As per the project's instructions:
github.com/ionic-team/ionicons
Hope this helps someone save a couple of minutes :-)
Doesn't this give you a deprecation warning?
github.com/ionic-team/ionicons/iss...
thank you very much.
You're welcome 😊
vue-ionicons can be a solution to use it as a component. Please have a look github.com/mazipan/vue-ionicons
Many thanks for this recommendation. As far as I see this isn't compatible with Ionicons v5.x, unfortunately.
Would it be possible to get this updated for Vue3? I am trying to figure this out in using Vite and typescript and keep coming up at a loss.
Should be similar in Vue3, except
ignoredElements
is nowisCustomElement
. Also you need to distiguish between on-the-fly compilation and pre-compilation. This page in the docs should help you.On-the-fly example:
Webpack example in
vue.config.js
:Thank You for this article - I really like how you can customize the new Ionicons.
My pleasure! 😊