⛄ Vue Ionicons

Vue Icon Set Components from Ionic Team

Design icons sourced from the Ionicons project.

🎉 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/ios-alert.vue'
   // OR using transpiled js version
   // import AlertIcon from 'vue-ionicons/dist/js/ios-alert'
   
   components: {
     AlertIcon
   }

   OR

   Declare it as a global component:

   import AlertIcon from 'vue-ionicons/dist/ios-alert.vue'
   // OR using transpiled js version
   // import AlertIcon from 'vue-ionicons/dist/js/ios-alert'
   
   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 />

Import some icon sets

Sometimes we don't want import one by one, so from v2.3.0 we can include this groups icon: ios, md, logo.

import AllIosIcon from 'vue-ionicons/dist/ionicons-ios.js'

Vue.use(AllIosIcon)

/*
-- File available --
Material: ionicons-md.js
Logo: ionicons-logo.js
All: ionicons.js
*/

Then you already can use component in your template, component tag is same with filename with adding -icon in postfix.

Example:

<ios-add-circle-outline-icon />
<ios-add-circle-icon />

<md-add-circle-outline-icon />
<md-add-circle-icon />

🔥 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
animate	String	empty	Available: rotate, shake, beat

🏃 Development

Checkout with submodule :

git clone [email protected]: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.

Support me

• Via trakteer
• Direct support, send me an email

🎁 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.

Copyright © 2017 Built with ❤️ by Irfan Maulana