# simple-vue-icon

> A simple icon component for Vue 3

Latest version **1.3.5** (published 2022-05-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install simple-vue-icon
pnpm add simple-vue-icon
yarn add simple-vue-icon
bun add simple-vue-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 | 1.3.5 |
| Published | 2022-05-02 |
| First published | 2022-01-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 13.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Leon Si <contact@leonzalion.com> |
| Maintainers | leonzalion |
| Keywords | material design icons, vue 3, mdi, vue, vuejs, vue.js, icons, icon, material-design, material design |

## Links

- npm: https://www.npmjs.com/package/simple-vue-icon
- Repository: https://github.com/leonzalion/simple-vue-icon
- Homepage: https://github.com/leonzalion/simple-vue-icon#readme
- Issues: https://github.com/leonzalion/simple-vue-icon/issues
- npm.io page: https://npm.io/package/simple-vue-icon

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [stockfish](https://npm.io/package/stockfish.md) — 27.0K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads

## Recent versions

- 1.3.5 (latest) — 2022-05-02
- 1.3.4 — 2022-05-02
- 1.3.3 — 2022-05-02
- 1.3.2 — 2022-04-28
- 1.3.1 — 2022-04-23
- 1.3.0 — 2022-04-23
- 1.2.1 — 2022-04-16
- 1.2.0 — 2022-04-14
- 1.1.13 — 2022-02-26
- 1.1.12 — 2022-02-17
- 1.1.11 — 2022-02-05
- 1.1.10 — 2022-01-15
- 1.1.9 — 2022-01-15
- 1.1.8 — 2022-01-08
- 1.1.7 — 2022-01-08
- … 4 more at https://npm.io/package/simple-vue-icon/versions

## README

# simple-vue-icon

[![npm version](https://img.shields.io/npm/v/simple-vue-icon)](https://npmjs.com/package/simple-vue-icon)

A simple icon component for Vue 3.

## Installation

```shell
npm add simple-vue-icon
```

## Usage

Import from `vue-simple-icon` to use the icon in your Vue components:

```vue
<script>
import { mdiArrowLeft } from '@mdi/js';
import VueIcon from 'simple-vue-icon';

export default {
  components: { VueIcon },
  setup() {
    return {
      mdiArrowLeft,
    };
  },
};
</script>

<template>
  <vue-icon :icon="mdiArrowLeft" />
</template>
```

or using `<script setup>` (recommended):

```vue
<script setup>
import { mdiArrowLeft } from '@mdi/js';
import VueIcon from 'simple-vue-icon';
</script>

<template>
  <vue-icon :icon="mdiArrowLeft" />
</template>
```

If you don't want to import the component manually, you can register it globally in your app's entrypoint:

```typescript
import { createApp } from 'vue';
import App from './app.vue';
import VueIcon from 'simple-vue-icon';

const app = createApp(App);
app.use('VueIcon', VueIcon);
// ...
```

## Props

### icon (required)

The [path string](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d) of the icon to render.

### width/height (number or string; default: 24)

```vue
<vue-icon :icon="mdiArrowLeft" width="30" :height="30" />
```

### size (number or string; default: 24)

Sets the width and the height of the icon

```vue
<!-- Equivalent to <vue-icon :icon="mdiArrowLeft" width="64" height="64" /> -->
<vue-icon :icon="mdiArrowLeft" size="64" />
```

## Credits

Most of the code is forked from [mdi-vue](https://github.com/therufa/mdi-vue).

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