vue-ionicons

:snowman: Vue Ionicons

Vue Icon Set Components from Ionic Team

Design icons sourced from the Ionicons project.

Warning!!! Vue-Ionicons v2.0.0 we will move to ionicons branch 4.0 for better icons naming

🎉 Demo

https://mazipan.github.io/vue-ionicons

🚀 Getting started

1. Install the package

   # NPM
   npm install --save vue-ionicons
   
   # Yarn
   yarn add vue-ionicons
   

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

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

   OR

   Declare it as a global component:

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

   Note Icon files are kebab cased, e.g. alert-circle.vue. All icon generated can be see in dist folder.

3. Include global CSS/SCSS in your main.js

   # Using plain css
   require('vue-ionicons/ionicons.css')
   # Or using SCSS import
   @import('~vue-ionicons/ionicons.scss')
   

4. Then use it in your template code!

   <AlertIcon />
   

🔥 API and Props

Name	Type	Default	Description
w	String	14px	Width of SVG
h	String	14px	Height of SVG
rootClass	String	empty	Class for wrapper SVG
rotate	Boolean	false	Enable animation rotation
beat	Boolean	false	Enable animation beating
shake	Boolean	false	Enable animation shaking

🏃 Development

Checkout with submodule :

git clone [e-mail]:mazipan/vue-ionicons.git
git submodule init
git submodule update --remote

Run demo

npm run dev

Build demo

npm run build

Build new distribute icon

npm run dist

👍 Tips

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

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

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

💵 Credits

• Ionicons project by @Ionic-Team.
• Vue Material Design Icons by @robcresswell.

🎁 Contributing

If you'd like to contribute, head to the contributing guidelines. Inside you'll find directions for opening issues, coding standards, and notes on development.