Open petr-hybler opened 3 years ago
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.
I'm having this same issue.
I sticked with vue2 for now :( for I like it better than vue3 + all those non-compatible packages ...
Guys any news?
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!
@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: {} }));
};
Any news on standard Vue 3 support? I tried the above with Vue 3.2.0, but it does not seem to work.
for vue3 support https://www.npmjs.com/package/vue-feather-icons
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 ...