<h1 align="center">
Aplus svg icons for Vue3
</h1>

<div align="center">

Vue3 SVG icon components integrated from [`@aplus-frontend/icon`](https://www.npmjs.com/settings/aplus-frontend/packages)
can be imported like a component. try it now 🎉

</div>
<div align="center">

![NPM Version](https://img.shields.io/npm/v/%40aplus-frontend%2Ficon)
![NPM Downloads](https://img.shields.io/npm/dm/%40aplus-frontend%2Ficon)
![NPM License](https://img.shields.io/npm/l/%40aplus-frontend%2Ficon)

</div>

## Install

```bash
pnpm add @aplus-frontend/icon -w
```

## Basic Usage

First, you should add the icons that you need into the library.
After that, you can use icons in your Vue components as simply as this:

```vue
import { IconApOrder } from '@aplus-frontend/icon'
<template>
  <IconApOrder />
</template>
```

## Custom Icon

Style properties of icon, like fontSize and color

<details open>
<summary>Copy Code</summary>

```vue
<script setup>
import { IconApLogistics } from '@aplus-frontend/icon';
</script>

<template>
  <IconApLogistics
    :style="{
      fontSize: '40px',
      display: 'inline-block',
      animation: 'spin 4s linear infinite',
    }"
  />
</template>

<style lang="less">
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>
```

</details>

## All of icons in the library

[You can see more detail in the document](https://aplus.aplnk.com/aplus-icon/)

```js
// or you can import all of the icons

import icons from '@aplus-frontend/icon';
```

## Build project

```bash
pnpm run build:icons # Build library
```
