fengyuanchen / vue-feather Goto Github PK

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

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>

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!

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.

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?

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'

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>

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');

Hi

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

Is is possible to partially fill the icons.

Use case:

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

Hey. Is there a type definition for this??

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?