Create Custom Icon with Ionic Vue

[moxiemonkshood]

I would like to use our own custom svg icons in an ion-icon component.
I found this article https://medium.com/@JordanBenge/how-to-create-custom-ionic-4-icons-af80cc6cc148 but it is based in angular.
Is there any documentation for doing this with Vue?

[sdetweil]

See my post here

Using ionicons in Ionic Vue 3

i gave up for now and create components for each icon from the svg file edit the svg, with some text editor and make a little component <template> <svg style="width:24px;height:24px" viewBox="0 0 512 512"> <path d='M64 384h384v-42.67H64zm0-106.67h384v-42.66H64zM64 128v42.67h384V128z'/></svg> </template> <script> export default {} </script> <style> body put the path part of the svg file where the path part is above then save this in components as the name.vue then in your other cod…

[monkshood99]

Thanks @sdetweil,
I found that just supplying the path to the svg works to add a custom icon.
Is there a reason not to do it this way. It seems very simple compared to creating a custom component.

[sdetweil]

No, your way is easiest!

[imincode]

Can you show me how to do this that works when the project is compiled for production? I did like this

<ion-icon src="src/assets/img/charity.svg"></ion-icon>

and the icon will only appear when I run ionic serve but not when I compiled my project using ionic build --prod.

[tetsuwanadam]

Here’s what works in my project. I have a custom icon at:
/public/assets/icons/checkbox-custom.svg

And ion-icon is set like this:
<ion-icon src="/assets/icons/checkbox-custom.svg" />