Vue Icon Set Components from Ionic Team

vue-ionicons

Vue Icon Set Components from Ionic Team

Design Icons, sourced from the Ionicons project.

Getting started

  1. Install the package

    $ npm install --save vue-ionicons
    

    OR

    $ yarn add vue-ionicons
    
  2. Import the icon, and declare it as a local component:

    import AlertIcon from 'vue-ionicons/alert.vue'
    
    components: {
      AlertIcon
    }
    

    OR

    Declare it as a global component:

    import AlertIcon from 'vue-ionicons/alert.vue'
    
    Vue.component('menu-icon', AlertIcon)
    

    Note Icon files are kebab cased, e.g. alert-circle.vue, and
    their default name has -icon appended e.g. alert-circle-icon.

  3. Then use it in your template code!

    <menu-icon />
    

Icons

A list of the icons can be found at the Ionicons Repository

Tips

  • Use resolve in your Webpack config to clean up the imports:

    resolve: {
       alias : {
         "icons": path.resolve(__dirname, "node_modules/vue-ionicons")
       },
      extensions: [
        ".vue"
      ]
    }
    

    This will give you much shorter and more readable imports, like
    import Android from 'icons/android', rather than
    import Android from 'vue-ionicons/android.vue'. Much better!

GitHub