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
   

   Bash

   OR

   $ yarn add vue-ionicons
   

   Bash

2. Import the icon, and declare it as a local component:

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

   JavaScript

   OR

   Declare it as a global component:

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

   JavaScript

   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 />
   

   HTML

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"
    ]
  }
  

  JavaScript

  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