Use it with Vue #562
Description
This is an informative post for future visitors who would like to use this library with Vue (because vue-feather-icons is 2 years old)
Create a Icon.vue file
<template>
<component :is="`icon-${name}`" :size="size"></component>
</template>
<script>
import { icons } from 'feather-icons';
const components = Object.values(icons).reduce(
(prev, curr) => ({
...prev,
[`icon-${curr.name}`]: {
props: ['size'],
render(createElement) {
return createElement('div', {
style: { display: 'inline-block' },
domProps: { innerHTML: curr.toSvg({ width: this.size, height: this.size }) },
});
},
},
}),
{},
);
export default {
props: {
name: {
type: String,
validator: value => {
return icons.hasOwnProperty(value);
},
},
size: {
type: Number,
default: 16,
},
},
components,
};
</script>and use it in your projects like the following
<template>
<Icon name="activity" :size="24" />
</template>
<script>
import Icon from '';
export default {
components: {Icon}
}
</script>or use it globally with Vue.component(Icon) in your index file