# @shapla/vue-icon

> The icon-container component is a container for any type of icon font for Vue 3

Latest version **1.0.0** (published 2021-06-02) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @shapla/vue-icon
pnpm add @shapla/vue-icon
yarn add @shapla/vue-icon
bun add @shapla/vue-icon
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-06-02 |
| First published | 2021-06-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sayful Islam |
| Maintainers | sayful |
| Keywords | vue, vue-component, icon-container, icon |

## Links

- npm: https://www.npmjs.com/package/@shapla/vue-icon
- Repository: https://github.com/sayful1/shapla-vue-components
- Homepage: https://github.com/sayful1/shapla-vue-components#readme
- Issues: https://github.com/sayful1/shapla-vue-components/issues
- npm.io page: https://npm.io/package/@shapla/vue-icon

## Dependencies (1)

- [shapla-css](https://npm.io/package/shapla-css.md) ^2.0

## 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
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2021-06-02

## README

# Shapla Icon

The icon-container component is a container for any type of icon font. Because the icons can take a few seconds to load,
and because you want control over the space the icons will take, you can use the icon class 
as a reliable square container that will prevent the page to "jump" on page load.

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-icon
```

# Usage

### Styles

with Sass:

```js
import '@shapla/vue-icon/src/index.scss';
```

with CSS:

```js
import '@shapla/vue-icon/dist/style.css';
```

### Javascript Instantiation

```js
import ShaplaIcon from '@shapla/vue-icon';

export default {
  name: 'Hello',

  components: {
    ShaplaIcon
  },
}

```

```html
<shapla-icon size="medium"><i class="fas fa-fw"></i></shapla-icon>
```

### Props
| Property      | Type      | Required  | Default   | Description
|---------------|-----------|-----------|-----------|---------------------------------------------
| `size`        | String    | **no**    | ``        | Value can be `small` or `medium` or `large`
| `hoverable`   | Boolean   | **no**    | `false`   | If set `true`, transparent background color will be added on hover

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