tthallos/vue-feather-icon

Recommended vue-feather-icons for your project

vue-feather-icon

Vue component for Feather

install

npm install vue-feather-icon

usage

global component

// main.js
import Vue = from 'vue'
import VueFeatherIcon from 'vue-feather-icon'

Vue.use(VueFeatherIcon)

<template>
  <feather-activity></feather-activity>
  <!-- or -->
  <feather-icon type="activity"></feather-icon>
</template>

local component

<script>
  import { Activity } from 'vue-feather-icon'

  export default {
    components: {
      ActivityIcon: Activity
    }
  }
</script>

<template>
  <activity-icon></activity-icon>
</template>

vue-feather-icon's Issues

Issues using components with dynamic imports

I am experiencing issues using vue-feather-icon with dynamically imported components.

In my project, I make use of code splitting via dynamic imports:

const router = new VueRouter({
  routes: [
    { path: '/foo', component: () => import('./Foo') }
  ]
})

Unfortunately, this approach doesn't work with vue-feather-icon. Using both methods described in the README, I get the following error:

The rendering output is as follows:

I discovered two possible solutions to workaround/fix the issue:
Either dynamically import each icon independently. I don't really like that approach as I directly reference components in the library, but it seems to be the quickest solution for now.

export default {
    name: 'Foo',

    components: {
      ActivityIcon: () => import('vue-feather-icon/components/activity.vue')
    }
}

Or dynamically import all components in vue-feather-icon/plugin.js. With that approach we could continue using the library as intended.

module.exports = function(Vue) {
  Vue.component('feather-activity', () => import('./components/activity.vue'))
}

To be honest, I haven't tested if the latter introduces any other issues with projects not using dynamic imports, but I don't see why it should cause any.

What do you think? Is there maybe another solution I might not see?

Stroke color (#000) defined as attribute on SVG

The stroke color is defined as an attribute of #000 when instead should use cascading color values (currentColor) to allow for simple manipulation.

Doesn't run

With <feather-icon type="activity"></feather-icon> it returns: <!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->

Pass props to the components

It would be nice to pass properties to the components to easily modify the width, length, color, etc. of the icons.

The props could be:

• size (width / height): Number
• stroke: String
• stroke-width: Number
• stroke-linecap: String
• stroke-linejoin: String

What do you think?

How to keep updated the component with newer feather icon?

Hello,
I was wondering if this vue component is going to include newer feather icons. If not, what's the process to create new ones? I'm not JS expert but I use the icons in almost all my projects. This is not a complain, I'm thankful this vue component exists, I just want to know how to keep it updated. Any directions would be welcome :)

Thanks in advance @mage3k

Unexpected token < with nuxt.js

plugin/feather_icon.js

import Vue from 'vue'
import VueFeatherIcon from 'vue-feather-icon'

Vue.use(VueFeatherIcon)

nuxt.config.js

...
  plugins: [{ src: '~/plugins/feather_icon.js' }],
...

Add class to the svg

Hi, great package! :)

Is there a way to add a custom class to the icon?

Right now im using it like this:

<feather-icon type="folder"></feather-icon>

but instead of wrapping it on an element and use something like span.folder > svg to change the stroke color, would be awesome if i could just do:

<feather-icon type="folder" class="fi-folder"></feather-icon>

Is that possible? i can make a wrapper component for my app but i wanted to ask first :)

Thanks!

Use functional components

Since all those .vue files only have template

Uncaught TypeError: Cannot set property props of #<Object> which has only a getter

Hi,
I got the following error when I try to install the module:
Uncaught TypeError: Cannot set property props of #<Object> which has only a getter

I installed it globally using

import VueFeatherIcon from 'vue-feather-icon'

Vue.use(VueFeatherIcon)

I use vue version 2.5.2

Clickable Event

Not able to pass in @click or v-on:click to work within the Vue.js instance.. has anyone figured it out? this is what I have tried:
<feather-info v-on:click="showInfo()" class="w-4 h-4 text-grey-light align-middle" stroke="currentColor" data-dest="infoDialogText" @click:prevent="showInfo" title="Information"></feather-info>

Got this to work... but seems to be just a work around:
<feather-info v-bind:onclick="'window.vueapp.showInfo(event)'" class="w-4 h-4 text-grey-light align-middle" stroke="currentColor" data-dest="infoDialogText" title="Information"></feather-info>

Any ideas of why the on:click doesn't work??

icon doesn't exist

There are some icons doesn't exist
ex: dollar-sign, shopping-bag, etc

Add missing icons

Great project, it's been really useful.

There's a few icons missing, e.g. file-plus, file-minus, file-text, etc. Are you looking to add these in the near future and/or would you accept a pull request?

Cheers!

How to use the icons in the html template?

Hi,

If I understand this correctly I can obtain an icon by:
const ActivityIcon = require('vue-feather-icon/components/activity')

How would I then use this? Should I set that as src for one of my <img> tags? Which then enables me to manipulate the icon (changing color, size etc with css)

Thanks.