Notoriously Punctual Manatee

    vue-ionicons

    3.0.5 • Public • Published

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

    Install

    npm i vue-ionicons

    DownloadsWeekly Downloads

    800

    Version

    3.0.5

    License

    MIT

    Unpacked Size

    3.5 MB

    Total Files

    1407

    Last publish

    Collaborators

    • irfan.maulana