{"_id":"@advisr/vue-ionicons","_rev":"3-c1fcbf2f785591402029fba4e7d62e1c","name":"@advisr/vue-ionicons","dist-tags":{"latest":"3.0.6"},"versions":{"3.0.6":{"name":"@advisr/vue-ionicons","version":"3.0.6","keywords":["vue ionicons","vue icon","vue font icon","ionicons"],"author":{"url":"https://github.com/mazipan/","name":"Irfan Maulana"},"license":"MIT","_id":"@advisr/vue-ionicons@3.0.6","maintainers":[{"name":"jrohland","email":"jesse.rohland@gmail.com"}],"homepage":"https://github.com/mazipan/vue-ionicons#readme","bugs":{"url":"https://github.com/mazipan/vue-ionicons/issues"},"dist":{"shasum":"ae0775f03de7d5a73ac9e1bf03cfc8b8dd571ad6","tarball":"https://registry.npmjs.org/@advisr/vue-ionicons/-/vue-ionicons-3.0.6.tgz","fileCount":1407,"integrity":"sha512-YhwiPuk51vqQNO0Dm9PeWJXscbGHVwu6CZC5OnFVvfQ/drdtm0xk/jyAypoSIWkQH2cCFCvFHOrf+c1fGM76QQ==","signatures":[{"sig":"MEQCIHepQ1yVlAHT6FMyqQi9HDMjX1+GOx+Ew8Gi0Sxn6tFSAiAt/tTtBMQZW2Hv/sdOlLE2rFw8l3a2wXz8yISF4ZaI9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4493230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1XdXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpy0A/9He0zx7AGcokMVRedRXYGkB56leCTX5htvwd4ktYn2aEilxJt\r\nAzPSdI4Nlbr6ttPRwXdh3bRrMcn0dmTIF558OH5TGred0KX8mpKsupRUS6tW\r\n0DmFmMJMuq149NFWMu4lq3DkhyyDZh5Enu6EtDV7Yo6wYCyzOVgn6/81ugT0\r\nN22zGtwaTzFL4YS3NfWCoeEGWl7Ug0Di+2BBipNOYHONfuSjMkfZ2Jb0R8qw\r\nTGhslMOLfXJ+0k7+nZV5peQR7g6JKgohCfXqnM3gZTmodT7ZiO/HD9vE4UMr\r\nSc9Q8pVSh0sY4k9trr0RaOj8MAgISnOOZWRBlQ/ahmlJDf0b+XQY7nBCy6Lr\r\nHCoQoL5z2XquqDQ0AJhbr3SfnQ9cy0uYSurIT//gkmq8BgvR0c056xUBBcFf\r\nz9ChnZmf+pOlPLF7ukTJuCXHnSa/AcsDMWcFcxFY8fEcNAjScAd+cxdh3GAd\r\nS/tMFClITt05arhZSPR8fv5ACaKjUcVbUKqI1Ya6FHM1AOvNOqWEleEXsNSF\r\nSaEBHjUo65D5sPWI+zC63o3Rwyis47zOV/DAfS99tsRUal2W1X3MGUGwjSvj\r\nPLhf/rQiMln6/dUahwA8xWdsSTTWxp+5MSdlXhbxROiNTNmUsr8849Co6sSQ\r\n8f98BDIYtpNE/5MdRdEmgZrDm81LaMUybnA=\r\n=Fa+H\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"477dbcb5f168b6c1075f8b88d25c69dcb9f79550","scripts":{"dev":"rimraf demo/dist && cross-env NODE_ENV=development ./node_modules/.bin/poi --serve","dist":"node dist.js && yarn build-lib","deploy":"node ./gh-publish.js","build-lib":"rimraf dist/js && ./node_modules/.bin/bili --config bili.config.js","build-demo":"rimraf demo/dist && cross-env NODE_ENV=production ./node_modules/.bin/poi --prod"},"_npmUser":{"name":"jrohland","email":"jesse.rohland@gmail.com"},"repository":{"url":"git+https://github.com/mazipan/vue-ionicons.git","type":"git"},"_npmVersion":"8.11.0","description":"Vue Icon Set Components from Ionic Team","directories":{},"_nodeVersion":"16.16.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"ora":"^3.0.0","poi":"12.7.3","vue":"^2.5.21","bili":"^3.4.2","svgo":"^1.1.1","chalk":"^2.4.2","eslint":"^5.12.0","rimraf":"^2.6.3","shelljs":"^0.8.3","gh-pages":"2.1.1","mustache":"^3.0.1","cross-env":"^5.2.0","node-sass":"^4.11.0","babel-core":"7.0.0-bridge.0","css-loader":"^2.1.0","vue-loader":"^15.5.0","@babel/core":"^7.2.2","file-loader":"^3.0.1","sass-loader":"^7.1.0","style-loader":"0.23.1","@babel/preset-env":"^7.2.3","eslint-plugin-vue":"5.1.0","rollup-plugin-vue":"^4.3.2","eslint-plugin-html":"^5.0.0","vue-template-compiler":"^2.5.21","workbox-webpack-plugin":"^3.6.3","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/plugin-syntax-dynamic-import":"^7.2.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-ionicons_3.0.6_1658156887534_0.13243122109318328","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-07-18T15:08:07.478Z","modified":"2025-07-17T12:25:08.827Z","3.0.6":"2022-07-18T15:08:07.730Z"},"bugs":{"url":"https://github.com/mazipan/vue-ionicons/issues"},"author":{"url":"https://github.com/mazipan/","name":"Irfan Maulana"},"license":"MIT","homepage":"https://github.com/mazipan/vue-ionicons#readme","keywords":["vue ionicons","vue icon","vue font icon","ionicons"],"repository":{"url":"git+https://github.com/mazipan/vue-ionicons.git","type":"git"},"description":"Vue Icon Set Components from Ionic Team","maintainers":[{"email":"jesse.rohland@gmail.com","name":"jrohland"}],"readme":"# :snowman: Vue Ionicons\n\n> Vue Icon Set Components from Ionic Team\n\n[![License](https://img.shields.io/github/license/mazipan/vue-ionicons.svg?maxAge=3600)](https://github.com/mazipan/vue-ionicons) [![Travis](https://img.shields.io/travis/mazipan/vue-ionicons.svg)](https://travis-ci.org/mazipan/vue-ionicons) [![version](https://img.shields.io/npm/v/vue-ionicons.svg?maxAge=60)](https://www.npmjs.com/package/vue-ionicons) ![downloads](https://img.shields.io/npm/dt/vue-ionicons.svg?maxAge=3600)\n\nDesign icons sourced from the\n[Ionicons](https://github.com/ionic-team/ionicons) project.\n\n## 🎉 Demo\n\n[https://mazipan.github.io/vue-ionicons](https://mazipan.github.io/vue-ionicons)\n\n## 🚀 Getting started\n\n1. Install the package\n\n    ```bash\n    # NPM\n    npm install --save vue-ionicons\n\n    # Yarn\n    yarn add vue-ionicons\n    ```\n\n1. Import the icon, and declare it as a local component:\n\n    ```javascript\n    import AlertIcon from 'vue-ionicons/dist/ios-alert.vue'\n    // OR using transpiled js version\n    // import AlertIcon from 'vue-ionicons/dist/js/ios-alert'\n\n    components: {\n      AlertIcon\n    }\n    ```\n\n    OR\n\n    Declare it as a global component:\n\n    ```javascript\n    import AlertIcon from 'vue-ionicons/dist/ios-alert.vue'\n    // OR using transpiled js version\n    // import AlertIcon from 'vue-ionicons/dist/js/ios-alert'\n\n    Vue.component('alert-icon', AlertIcon)\n    ```\n\n    > **Note** Icon files are kebab cased, e.g. `alert-circle.vue`. All icon generated can be see in [dist](https://github.com/mazipan/vue-ionicons/tree/master/dist) folder.\n\n1. Include global CSS/SCSS in your `main.js`\n\n    ```js\n    # Using plain css\n    require('vue-ionicons/ionicons.css')\n    # Or using SCSS import\n    @import('~vue-ionicons/ionicons.scss')\n    ```\n\n1. Then use it in your template code!\n\n    ```html\n    <AlertIcon />\n    ```\n\n## Import some icon sets\n\nSometimes we don't want import one by one, so from v2.3.0 we can include this groups icon: `ios`, `md`, `logo`.\n\n```javascript\nimport AllIosIcon from 'vue-ionicons/dist/ionicons-ios.js'\n\nVue.use(AllIosIcon)\n\n/*\n-- File available --\nMaterial: ionicons-md.js\nLogo: ionicons-logo.js\nAll: ionicons.js\n*/\n```\n\nThen you already can use component in your template, component tag is same with filename with adding `-icon` in postfix.\n\nExample:\n\n```html\n<ios-add-circle-outline-icon />\n<ios-add-circle-icon />\n\n<md-add-circle-outline-icon />\n<md-add-circle-icon />\n```\n\n## 🔥 API and Props\n\n| Name               | Type                 | Default     | Description                          |\n|--------------------|----------------------|-------------|--------------------------------------|\n| w                  | String               | 14px        | Width of SVG                         |\n| h                  | String               | 14px        | Height of SVG                        |\n| rootClass          | String               | `empty`     | Class for wrapper SVG                |\n| animate            | String               | `empty`     | Available: `rotate`, `shake`, `beat` |\n\n## 🏃 Development\n\nCheckout with submodule :\n\n```bash\ngit clone git@github.com:mazipan/vue-ionicons.git\ngit submodule init\ngit submodule update --remote\n```\n\nRun demo\n\n```bash\nnpm run dev\n```\n\nBuild demo\n\n```bash\nnpm run build\n```\n\nBuild new distribute icon\n\n```bash\nnpm run dist\n```\n\n## 👍 Tips\n\n- Use `resolve` in your Webpack config to clean up the imports:\n\n  ```javascript\n  resolve: {\n    alias : {\n      \"icons\": path.resolve(__dirname, \"node_modules/vue-ionicons/dist\")\n    }\n  }\n  ```\n\n  This will give you much shorter and more readable imports, like\n  `import Android from 'icons/android'`, rather than\n  `import Android from 'vue-ionicons/dist/android.vue'`. Much better!\n\n## 💵 Credits\n\n- [Ionicons](https://github.com/ionic-team/ionicons) project by [@Ionic-Team](https://github.com/ionic-team).\n- [Vue Material Design Icons](https://gitlab.com/robcresswell/vue-material-design-icons) by [@robcresswell](https://gitlab.com/robcresswell/).\n\n## Support me\n\n- Via [trakteer](https://trakteer.id/mazipan)\n- Direct support, [send me an email](mailto:mazipanneh@gmail.com)\n\n## 🎁 Contributing\n\nIf you'd like to contribute, head to the [contributing guidelines](/CONTRIBUTING.md). Inside you'll find directions for opening issues, coding standards, and notes on development.\n\nCopyright © 2017 Built with ❤️ by Irfan Maulana\n","readmeFilename":"README.md"}