Skip to content

mazipan/vue-ionicons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

⛄ Vue Ionicons

Vue Icon Set Components from Ionic Team

License Travis version downloads

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

👍 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

Support me

🎁 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