Use it with Vue

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

```vue

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,
};

```

and use it in your projects like the following

```vue

import Icon from '';
export default {
components: {Icon}
}

```

or use it globally with `Vue.component(Icon)` in your index file

The proposal centers on creating an Icon.vue file and importing Icon in a project script, with optional global registration from the index file. First inspect the repository’s existing documentation or examples to determine where this Vue guidance belongs; done means the integration instructions and usage example are added in the appropriate place.

Written by the indexing model from the issue text.