⛄️ 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
-
Install the package
# NPMnpm install --save vue-ionicons# Yarnyarn add vue-ionicons -
Import the icon, and declare it as a local component:
// OR using transpiled js version// import AlertIcon from 'vue-ionicons/dist/js/ios-alert'components:AlertIconOR
Declare it as a global component:
// OR using transpiled js version// import AlertIcon from 'vue-ionicons/dist/js/ios-alert'VueNote 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# Or using SCSS@import'~vue-ionicons/ionicons.scss' -
Then use it in your template code!
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
.
Vue /*-- File available --Material: ionicons-md.jsLogo: ionicons-logo.jsAll: ionicons.js*/
Then you already can use component in your template, component tag is same with filename with adding -icon
in postfix.
Example:
🔥 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 git@github.com:mazipan/vue-ionicons.gitgit submodule initgit 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": pathThis will give you much shorter and more readable imports, like
import Android from 'icons/android'
, rather thanimport 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