qinshenxue / vue-icon Goto Github PK

View Code? Open in Web Editor NEW

54.0 2.0 12.0 674 KB

Maybe it is the smallest vue component that contains all the feather icons

Home Page: https://qinshenxue.github.io/vue-icon/

License: MIT License

JavaScript 19.03% HTML 75.98% EJS 4.98%

vue2 svg vue-component vue2-component feather-icons vue-feathers icons vue-icon feather

vue-icon's Introduction

vue-icon

vue2 svg icon component

Maybe it is the smallest vue component library that contains all the feather icons

Icons

https://qinshenxue.github.io/vue-icon/

Usage

using npm

$ npm install vue-icon

The default component name is icon, you can specify a new component name with Vue.use(plugin,customName).

import Vue from 'vue';
import App from './app.vue';
import feather from 'vue-icon'
Vue.use(feather, 'v-icon')
new Vue({
    el: '#app',
    render: h => h(App)
});

Or configure an object to change the name and the default icon class.

Vue.use(feather, {
    name: 'v-icon',
    props: {
        baseClass: {
            type: String,
            default: 'v-icon'
        },
        classPrefix: {
            type: String,
            default: 'v-icon-'
        }
    }
})
// or
Vue.use(feather, {
    name: 'v-icon',
    data(){
        return {
            baseClass: 'v-icon',
            classPrefix: 'v-icon-'
        }
    }
})

The configured objects are treated as mixins, so you can define it like normal Vue instance objects.

using in .vue file

<template>
    <div>
        <v-icon name="eye"></v-icon>
        <v-icon name="x"></v-icon>
        <custom-icon name="activity" base-class="custom-icon"></custom-icon>
    </div>
</template>

<script>
    import customIcon from 'vue-icon/lib/vue-feather.esm'
    export default{
        components: {
            customIcon
        },
        data: function () {
            return {
                baseClass: 'v-icon'
            }
        }
    }
</script>
<style>
    .v-icon,
    .custom-icon {
        width: 24px;
    }
</style>

Or using script tag

<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue-icon/lib/vue-feather.min.js"></script>

<!-- component name is icon by default -->
<icon name="close"></icon>

Icon Style

Components don't contain any style definitions, you can define styles based on baseClass:'icon' and classPrefix:'icon-'.

.icon{
    color:#666
}
.icon:hover{
    color:#000
}
.icon-close{
	color:red
}

Component Attributes

Attribute	Description	Type	Default
name	The name of icon	string	--
base-class	icon base class	string	icon
class-prefix	icon class prefix	string	icon-

Changelog

Detailed changes for each release are documented in the release notes.

vue-icon's People

Contributors

Stargazers

Watchers

Forkers

mariolll oleg79 mehmetkarakamis elfoglalt t0dd-kr vnaki mio-next yuanzhoucq freddie-nelson cheerfulstoic bhaskar-nair2

vue-icon's Issues

Where is the "?"

Really awesome looking icons, but.... where is the question icon?

'Unexpected token export' error when using vue-icon in Jest unit testing

Version

2.0.0

Steps to reproduce

Using https://github.com/vuejs-templates/webpack
Testing single file component using Jest which uses the v-icon component like:

<v-icon v-if="item.icon" v-bind:name="item.icon"></v-icon>

Running the following test:

import Vue from 'vue'
import { mount } from '@vue/test-utils'

import router from '@/router'
import VueI18n from 'vue-i18n'
import Vuelidate from 'vuelidate'
import BootstrapVue from 'bootstrap-vue'
import feather from 'vue-icon'

import DropdownIcon from '@/components/molecules/DropdownIcon'

describe('DropdownIcon', () => {

    const wrapper = mount(DropdownIcon)
    const vm = wrapper.vm

    it('should be a Vue instance', () => {
        expect(wrapper.isVueInstance()).toBeTruthy()
    })

})

What is expected

vue-icon is imported and used in component - so component can be tested correctly.

What is actually happening

 FAIL  test\unit\specs\DropdownIcon.spec.js
  ● Test suite failed to run

    C:\Users\User\Development\project_name\node_modules\vue-icon\lib\vue-feather-plugin.esm.js:133
    export default install;
    ^^^^^^

    SyntaxError: Unexpected token export

       6 | import Vuelidate from 'vuelidate'
       7 | import BootstrapVue from 'bootstrap-vue'
    >  8 | import feather from 'vue-icon'
       9 |
      10 | import DropdownIcon from '@/components/molecules/DropdownIcon'
      11 |

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (test/unit/specs/DropdownIcon.spec.js:8:16)

Other information

When I run npm run dev the code compiles and builds out correctly, and vue-icon works as intended.
I only get this problem when I run npm run unit.

My other tests on components which don't use vue-icon work as intended. I believe this has something to do with vue-icon using uncompiled ES6 code? Please correct me if I'm wrong.

Thank you for your time!

Nuxt Support

How do I use this as a Nuxt plugin?

Your demo website is broken

Hi there. I was looking for relevant icons for my VR/WebXR section of the website,
and noticed that your website is no more working properly