# @humans/loading-icon

> Loading icon component

Latest version **3.0.0-beta.3** (published 2018-01-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @humans/loading-icon
pnpm add @humans/loading-icon
yarn add @humans/loading-icon
bun add @humans/loading-icon
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0-beta.3 |
| Published | 2018-01-05 |
| First published | 2017-11-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Wu Qicheng |
| Maintainers | freshesx |

## Links

- npm: https://www.npmjs.com/package/@humans/loading-icon
- npm.io page: https://npm.io/package/@humans/loading-icon

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.0.0
- [@humans/share](https://npm.io/package/@humans/share.md) ^3.0.0-beta.3

## Recent versions

- 3.0.0-beta.3 (latest) — 2018-01-05
- 3.0.0-beta.1 — 2018-01-04
- 3.0.0-alpha.13 — 2018-01-04
- 3.0.0-alpha.10 — 2017-12-31
- 3.0.0-alpha.9 — 2017-12-23
- 3.0.0-alpha.8 — 2017-12-23
- 3.0.0-alpha.5 — 2017-12-01
- 3.0.0-alpha.3 — 2017-11-24
- 3.0.0-alpha.2 — 2017-11-24

## README

# @humans/loading-icon

### Base usage

Base usage use the humans universal usage.

### Set custom icon in loading-icon globally

``` javascript
import share from '@humans/share'
import customIcon from './customIcon.vue'

// Global use customIcon
share.setLoading(customIcon)
```

### Set custom icon in the specified loading-icon

``` vue
<template>
  <mn-loading-icon :icon="customIcon"></mn-loading-icon>
</template>

<script>
  import customIcon from './customIcon.vue'
  import loadingIcon from '@humans/loading-icon'

  export default {
    components: {
      ...loadingIcon.map()
    },
    data () {
      return {
        customIcon
      }
    }
  }
</script>
```

### Create many different loading-icons with custom icon by Mixins

``` javascript
// appLoadingIcon.vue
import customIcon from './customIcon.vue'
import loadingIcon from '@humans/loading-icon'

export default {
  name: 'app-loading-icon',
  mixins: [
    loadingIcon['mn-loading-icon']
  ],
  props: {
    icon: {
      type: Object,
      default () {
        const Component = Vue.extend(customIcon)
        return new Component().$mount()
      }
    }
  }
}
```

``` vue
<template>
  <app-loading-icon></app-loading-icon>
</template>

<script>
  import appLoadingIcon from './appLoadingIcon.vue'

  export default {
    components: {
      appLoadingIcon
    }
  }
</script>
```

---
_Source: https://npm.io/package/@humans/loading-icon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._