Usage of this Starter in a Vue 3 Project

[gmmehra]

Hi there,

i want to use this Starter Project in a Vue based Project but there is no instructions how to do that.

Any help would be highly appreciated.

Thanks in Advance.

[kreuzerk]

Hi @gmmehra, this starter is framework agnostic and therefore usable for all kinds of project. This starter takes icons and uses svg-to-ts to transform them into JS/TS files. The output can then be shipped as a icon library. In vue, you then have to import and render the icons generated by this library. Usually this is done via a dedicated component and a registry.

I recommend you to checkout this article for further information: https://kevinkreuzer.medium.com/how-to-build-your-own-tree-shakable-svg-icons-library-in-less-than-30-minutes-9f7a4a324d29?sk=df8ffad2754aceda5d28759c82f39a86

This article describes the process for Angular but it shouldn't be to complicated to apply the same concepts for Vue. I hope this helps.

[gmmehra]

Hi @gmmehra, this starter is framework agnostic and therefore usable for all kinds of project. This starter takes icons and uses svg-to-ts to transform them into JS/TS files. The output can then be shipped as a icon library. In vue, you then have to import and render the icons generated by this library. Usually this is done via a dedicated component and a registry.

I recommend you to checkout this article for further information: https://kevinkreuzer.medium.com/how-to-build-your-own-tree-shakable-svg-icons-library-in-less-than-30-minutes-9f7a4a324d29?sk=df8ffad2754aceda5d28759c82f39a86

This article describes the process for Angular but it shouldn't be to complicated to apply the same concepts for Vue. I hope this helps.

Hi @kreuzerk , thanks for your reply.
The problem is i am really new to this concept of building own library or adaptor.
I've read this article too and watched your YouTube Video about this whole process too.

But still there are plenty of questions which i have like what is the alternative for "svg-icons-builder" if i want to use same concept in VUE.

I am just stuck on building that wrapper, i've no idea how to actually implement same thing in Vue.

I would really appreciate if you can add steps to create own Vue Adaptor/Vue Icon wrapper into your readMe.

Thanks .