Vue Icon Set Components from Ionic Team
Design icons sourced from the Ionicons project.
https://mazipan.github.io/vue-ionicons
-
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 }
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. -
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 />
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 />
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 |
Checkout with submodule :
git clone git@github.com: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
-
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 thanimport Android from 'vue-ionicons/dist/android.vue'
. Much better!
- Ionicons project by @Ionic-Team.
- Vue Material Design Icons by @robcresswell.
- Via trakteer
- Direct support, send me an email
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