fengyuanchen / vue-feather

Feather component for Vue.js.

vue-feather

Feather icons component for Vue 3. For Vue 2, check out the v1 branch.

• Docs
• Demo

Main npm package files

dist/
├── vue-feather.js         (UMD, default)
├── vue-feather.min.js     (UMD, compressed)
├── vue-feather.esm.js     (ECMAScript Module)
├── vue-feather.esm.min.js (ECMAScript Module, compressed)
└── vue-feather.d.ts       (TypeScript Declaration File)

Getting started

Installation

Using npm:

npm install vue@3 feather-icons@4 vue-feather@2

Using pnpm:

pnpm add vue@3 feather-icons@4 vue-feather@2

Using Yarn:

yarn add vue@3 feather-icons@4 vue-feather@2

Using CDN:

<script src="https://unpkg.com/vue@3"></script><!-- Vue.js is required -->
<script src="https://unpkg.com/feather-icons@4"></script><!-- Feather is required -->
<script src="https://unpkg.com/vue-feather@2"></script>

Usage

import { createApp } from 'vue';
import VueFeather from 'vue-feather';

const app = createApp({});

app.component(VueFeather.name, VueFeather);

<vue-feather type="feather"></vue-feather>

Browser support

Same as Vue 3.

Versioning

Maintained under the Semantic Versioning guidelines.

License

MIT © Chen Fengyuan

vue-feather's Issues

uninstall feather-icons vue-feather is not working.

I have this problem after trying to remove vue-feather and feather-icons.

vue-feather in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/views/UserPosts.vue?vue&type=script&lang=js

To install it, you can run: npm install --save vue-feather
Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'

Typescript definition

Hey. Is there a type definition for this??

Partially fill icons.

Is is possible to partially fill the icons.

Use case:

Star ratings; Is it possible to partially fill the colours based on some values.

Fill prop does not work

Hi

I have been trying to use the fill prop but it does not work.

Not compatible with vue SSR

When using vue-feather with the SSR feature of vue (for example with vuepress) adding this plugin causes issues since it's accessing document which is not available during SSR rendering.

The issue occurs after the import at this line

var HEAD = document.head || document.getElementsByTagName('head')[0];

Would it be possible to refactor this so it's compatible with SSR?

Size format 'rem' not working

Hello,

using a 'rem' value for the size isn't working. The icon is not visible.
You can see this on your own page: https://fengyuanchen.github.io/vue-feather/ scroll down to "Size". There are 4 stars visible, the code example includes 5 sizes.

Failed to resolve component

Hi,

I followed the docs for installing the component globally on a fresh Vue 3 app with Typescript and I got this error message:

[Vue warn]: Failed to resolve component: vue-feather 
  at <Login onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

Any suggestion?

My main.ts look like:

import { createApp } from 'vue';
import VueFeather from 'vue-feather';
import App from './App.vue';
import http from './http';
import './registerServiceWorker';
import router from './router';
import store from './store';
import auth from './plugins/auth';

const app = createApp(App);

app.use(http);
app.use(store);
app.use(router);
app.use(auth);
app.component(VueFeather.name, VueFeather);
app.mount('#app');

Nuxt.js error - document is undefined

Hi! We are using vue-feather in our Design System which is imported in both Vue apps and Nuxt apps.

It seems that when using vue-feather in Nuxt app, there is an error because document is called on server side.
Using version 1.0.1

[Vue warn]: Error in beforeCreate hook: "ReferenceError: document is not defined"
found in

---> <Feather>
       <MksIcon>
         <AppMenu> at components/layouts/appMenu.vue
           <Layouts/default.vue> at layouts/default.vue
             <Root>

icon not display

i am using
"feather-icons": "^4.28.0",
"vue-feather": "^2.0.0-rc.1",
"vue": "^3.2.26",
node.js 14

also in main.js

import VueFeather from 'vue-feather';

app.component(VueFeather.name, VueFeather);

and in my component this below the line
<vue-feather type="star"></vue-feather>

but this is not showing the star icon.
am I missing something?

Props "class" is no longer recognized in new version

Hi,

Thank you for the amazing job you are doing with this library!

I just updated my dependancies to the latest version, and I noticed that the "class" props is no longer recognize.

For instance :
<feather type="star" size="12" tag="div" class="d-flex cursor-pointer ml-2" />

will generate a div with the following class :
class="feather feather--star"
instead of :
class="d-flex cursor-pointer ml-2 feather feather--star"
that it used to generate before.

I am rolling back for the moment to the previous version. Can you please tell me if this is just a temporary bug or if I should migrate all my pre-existing code to adapt to this? (hoping it's the first one to be honest :) )

Thanks a lot!

v-bind class not working

dynamic class not working. like :class='w-24 text-theme-1'

Component provided template option but runtime compilation is not supported in this build of Vue

I am running into this warning (and no component) on a pretty clean install for vue3 with TS.

[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js". 
  at <Anonymous> 
  at <VueFeather type="feather" > 
  at <Login onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: {…}, <handler>: {…} }
 > > 
  at <RouterView> 
  at <App>