# `@toruslabs/vue-icons`

Tor.us icons for Vue 3.

<p align="left">
  <a href="https://www.npmjs.com/package/@toruslabs/vue-icons"><img src="https://img.shields.io/npm/v/@toruslabs/vue-icons" alt="Latest Release"></a>
  <a href="https://github.com/torusresearch/torus-ui/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@toruslabs/vue-icons.svg" alt="License"></a>
</p>

## Usage

Icon styles are preconfigured to be stylable by setting the `color` CSS property, either manually or using utility classes like `text-gray-500` in a framework like [Tailwind CSS](https://tailwindcss.com).

First, install `@toruslabs/vue-icons` from npm:

```sh
npm install @toruslabs/vue
```

Now each icon can be imported individually as a Vue component:

```vue
<template>
  <div>
    <BookmarkIcon class="h-5 w-5 text-blue-500" />
    <p>...</p>
  </div>
</template>

<script setup>
import { BookmarkIcon } from "@toruslabs/vue-icons/basic";
</script>
```

Icons are grouped into subdirectories following the Tor.us Icons on Figma.

Icons use pascal case naming convention and are always suffixed with the word `Icon`.