@iconpaq/react/README.md

a free and opensource icon pack

<p align="center">
  <img src="https://app.techtalentshub.com/email/logo.png" alt="iconpaq">
</p>

<p align="center">
  A set of 300+ free MIT-licensed high-quality SVG icons for you to use in your web projects. 
  <br>
  Available as basic SVG icons and via first-party <a href="#react">React</a> and <a href="#vue">Vue</a> libraries.
<p>

<p align="center">
  <a href="https://iconpaq.com"><strong>Browse at Iconpaq.com &rarr;</strong></a>
</p>


<p align="center">
    <a href="https://github.com/enviretech/iconpaq/releases">
        <img src="https://img.shields.io/npm/v/iconpaq" alt="Latest Release">
    </a>
    <a href="https://github.com/enviretech/iconpaq/blob/master/LICENSE">
        <img src="https://img.shields.io/npm/l/iconpaq.svg" alt="License">
    </a>
</p>


## Basic Usage

The quickest way to use these icons is to simply copy the source for the icon you need from [iconpaq.com](https://iconpaq.com) and inline it directly into your HTML:

```html
<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
  />
</svg>
```

Both 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 [Enviretech](https://envire.tech).

## React

First, install `@iconpaq/react` from npm:

```sh
npm install @iconpaq/react
```

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

```js
import { BeakerIcon } from '@iconpaq/react/solid'

function MyComponent() {
  return (
    <div>
      <BeakerIcon className="h-5 w-5 text-blue-500"/>
      <p>...</p>
    </div>
  )
}
```

The 24x24 outline icons can be imported from `@iconpaq/react/outline`, and the 20x20 solid icons can be imported from `@iconpaq/react/solid`.

Icons use an upper camel case naming convention and are always suffixed with the word `Icon`.

[Browse the full list of icon names on UNPKG &rarr;](https://unpkg.com/browse/@iconpaq/react/outline/)


## Vue

*Note that this library currently only supports Vue 3.*

First, install `@iconpaq/vue` from npm:

```sh
npm install @iconpaq/vue
```

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

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

<script>
import { BeakerIcon } from '@iconpaq/vue/solid'

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

The 24x24 outline icons can be imported from `@iconpaq/vue/outline`, and the 20x20 solid icons can be imported from `@iconpaq/vue/solid`.

Icons use an upper camel case naming convention and are always suffixed with the word `Icon`.

[Browse the full list of icon names on UNPKG &rarr;](https://unpkg.com/browse/@iconpaq/vue/outline/)

## License

This library is MIT licensed.