Vue3 support

[petr-hybler]

Hello, do you plan to implement support for vue3 officially? Or should I rather stick with this unofficial release?

https://github.com/zhuowenli/vue-feather-icons

Because right now, I am facing an issue with using vue3 that it says "Cannot read property 'size' of undefined" in my simple component ...

[mariana-morais]

Hello, do you plan to implement support for vue3 officially? Or should I rather stick with this unofficial release?

https://github.com/zhuowenli/vue-feather-icons

Because right now, I am facing an issue with using vue3 that it says "Cannot read property 'size' of undefined" in my simple component ...

I'm having this same issue.

[petr-hybler]

I'm having this same issue.

I sticked with vue2 for now :( for I like it better than vue3 + all those non-compatible packages ...

[zolzaya]

Guys any news?

[ghostvar]

so, because it was too long waiting for compatibility suppport,
i have a some "little hurt tricky" way

lets take a look,
save this as lib, what ever you called it, ex: feathercompt.js
this lib is a tricky way to change render props function rules from vue v2 to v3

import * as VueBase from 'vue';

const comptbl = (ren) => {
  const { attrs, class: cls } = ren.props;
  if(attrs) {
    ren.props = attrs;
    ren.props.class = cls;
  }
  if(Array.isArray(ren.children)) {
    ren.children = ren.children.map((rem) => {
      return comptbl(rem);
    });
  }
  return ren;
}

export default function(Icon, size = "16") {
  const ren = Icon.render(VueBase.h, {props: {size}, data: {}});
  Icon.render = function () {
    return comptbl(ren);
  }
}

and import before you use a component, like this

import { Options, Vue } from 'vue-class-component';
import { BarChart2Icon, InfoIcon } from 'vue-feather-icons';
import featCompt from './lib/feathercompt';

featCompt(BarChart2Icon);
featCompt(InfoIcon);

@Options({
  components: {
    BarChart2Icon,
    InfoIcon
  },
})
export default class Home extends Vue {}

use tag like normal component

<ul>
    <li><router-link to="/"><bar-chart2-icon/>Home</router-link></li>
    <li><router-link to="/about"><info-icon/>About</router-link></li>
</ul>

as result:

happy code!

[omarkdev]

@ghostvar You can make a little change to accept the size with a prop in component without the need to define when call the featCompt:

import * as VueBase from 'vue';

const renderIcon = (ren) => {
  const { attrs, class: cls } = ren.props;
  if (attrs) {
    ren.props = attrs;
    ren.props.class = cls;
  }
  if (Array.isArray(ren.children)) {
    ren.children = ren.children.map((rem) => renderIcon(rem));
  }
  return ren;
};

export const makeCompatible = (Icon: any) => {
  const oldRender = Icon.render;

  Icon.render = (props) => renderIcon(oldRender(VueBase.h, { props, data: {} }));
};

[JacoBriers]

Any news on standard Vue 3 support? I tried the above with Vue 3.2.0, but it does not seem to work.

[lukeJEdwards]

for vue3 support https://www.npmjs.com/package/vue-feather-icons