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