Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mazipan/vue-ionicons
⛄️ Vue Icon Set Components from Ionic Team
https://github.com/mazipan/vue-ionicons
ionicons vue-icon vue-ionicons
Last synced: 3 days ago
JSON representation
⛄️ Vue Icon Set Components from Ionic Team
- Host: GitHub
- URL: https://github.com/mazipan/vue-ionicons
- Owner: mazipan
- License: mit
- Created: 2017-09-14T04:29:05.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-06-21T19:58:11.000Z (over 3 years ago)
- Last Synced: 2024-04-24T16:46:36.556Z (9 months ago)
- Topics: ionicons, vue-icon, vue-ionicons
- Language: CSS
- Homepage: https://mazipan.github.io/vue-ionicons
- Size: 11 MB
- Stars: 96
- Watchers: 3
- Forks: 16
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# :snowman: Vue Ionicons
> Vue Icon Set Components from Ionic Team
[](https://github.com/mazipan/vue-ionicons) [](https://travis-ci.org/mazipan/vue-ionicons) [](https://www.npmjs.com/package/vue-ionicons) 
Design icons sourced from the
[Ionicons](https://github.com/ionic-team/ionicons) project.
## 🎉 Demo
[https://mazipan.github.io/vue-ionicons](https://mazipan.github.io/vue-ionicons)
## 🚀 Getting started
1. Install the package
```bash
# NPM
npm install --save vue-ionicons
# Yarn
yarn add vue-ionicons
```
1. Import the icon, and declare it as a local component:
```javascript
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:
```javascript
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](https://github.com/mazipan/vue-ionicons/tree/master/dist) folder.
1. Include global CSS/SCSS in your `main.js`
```js
# Using plain css
require('vue-ionicons/ionicons.css')
# Or using SCSS import
@import('~vue-ionicons/ionicons.scss')
```
1. Then use it in your template code!
```html
```
## 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`.
```javascript
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:
```html
```
## 🔥 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 :
```bash
git clone [email protected]:mazipan/vue-ionicons.git
git submodule init
git submodule update --remote
```
Run demo
```bash
npm run dev
```
Build demo
```bash
npm run build
```
Build new distribute icon
```bash
npm run dist
```
## 👍 Tips
- Use `resolve` in your Webpack config to clean up the imports:
```javascript
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
- [Ionicons](https://github.com/ionic-team/ionicons) project by [@Ionic-Team](https://github.com/ionic-team).
- [Vue Material Design Icons](https://gitlab.com/robcresswell/vue-material-design-icons) by [@robcresswell](https://gitlab.com/robcresswell/).
## Support me
- Via [trakteer](https://trakteer.id/mazipan)
- Direct support, [send me an email](mailto:[email protected])
## 🎁 Contributing
If 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.
Copyright © 2017 Built with ❤️ by Irfan Maulana