search

matschik / vue-hero-icons

A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/heroicons, as Vue 2 functional components.
https://vue-hero-icons.netlify.com
MIT License
100 stars 8 forks source link

vue3 support missing #156

Closed MartB closed 3 years ago

MartB commented 3 years ago

See https://github.com/egoist/vue-feather-icons/issues/60 for a quick&dirty workaround.

matschik commented 3 years ago

Which error do you exactly encounter ?

ahoiroman commented 3 years ago

I am getting

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'ctx.props.size')

on vuejs3 if I use it like shown in the docs:

<AnnotationIcon size="1.5x" />

...

import { AnnotationIcon } from '@vue-hero-icons/outline'
MartB commented 3 years ago

Yeah, vue3 changed the render() function so this has to be entirely re-written to support vue3.

matschik commented 3 years ago

How would you want to import a vue3 component from this component library ? I want this library compatible with Vue2 too.

Solutions: 1) I can create a new major version focused on Vue3 on '@vue-hero-icons/outline' and '@vue-hero-icons/solid'. But I don't like this idea because devs could upgrade this dependency by mistake on their Vue2 apps.

2) I can take this opportunity to use vue-heroicons package namespace: import { AnnotationIcon } from "@vue-heroicons/outline". But it can be confusing with the previous namespace...

3) I can create a new package named heroicons-vue and you can import components like this: import { AnnotationIconSolid, AnnotationIconOutline } from "heroicons-vue"

Also, feel free to submit a PR or give me an example of icon library using Vue3. I want to grab the best practices.

ahoiroman commented 3 years ago

I guess it would be a good idea to use some kind of @next-notation like vue@next.

matschik commented 3 years ago

This is a temporary idea, we need a permanent decision. Choose between the 3 solutions or equivalent.

ahoiroman commented 3 years ago

In this case I'd prefer solution 2.

Quin452 commented 3 years ago

I'm glad to see that this has some sort of support.

I am currently trying to get Heroicons to work with Inertia project (basically Vue). I've even asked for support from Tailwind themselves, and they've yet to provide a solution.

They've suggested downloading the repo as a zip, as well as npm install. But neither of these work; NPM uses render, but Inertia asks for Default.

Then I found this, and come across the same issue with size as the OP.

ahmedgadit commented 3 years ago

solution 2 would be ok. waiting for update 🥰

benleivian commented 3 years ago

The tailwindlabs/heroicons repo supports vue 3: https://github.com/tailwindlabs/heroicons#vue I found this project looking for vue 2 support 🎉

martinsotirov commented 3 years ago

As a side note, thanks to the missing Vue 3 support this package is a perfect drop-in replacement for @heroicons/vue for those of us still using Vue 2 or Nuxt. Thanks for not updating to Vue 3 ✌️