egoist/vue-feather-icons

Vue3 support

petr-hybler opened this issue · 7 comments

petr-hybler commented

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 ...

marihemori commented

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 commented

I'm having this same issue.

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

  • 👍2
zolzaya commented

Guys any news?

ghostvar commented

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:
image

happy code!

  • 👍1
omarkdev commented

@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: {} }));
};
  • ❤️5
JacoBriers commented

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