vue-ionicons

:snowman: Vue Ionicons

Vue Icon Set Components from Ionic Team

downloads

Design icons sourced from the
Ionicons project.

🎉 Demo

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

🚀 Getting started

Install the package

 # NPM
npm install --save vue-ionicons

# Yarn
yarn add vue-ionicons

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
}

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.

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')

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.