open-index/open-npm huggingface dataset:
npm package: @iconplanet/uicons
Description: Open-source over 10.000 SVG web font optimal vector based icons available for web apps, iOS, and Android applications collected by IconPlanet.
Author: IconPlanet
Latest version: 1.1.0

# <img src="https://iconplanet.app/images/logo.svg" height="28" style="vertical-align:middle"> IconPlanet &nbsp;<img src="https://iconplanet.app/images/uicons-logo.svg" height="28" style="vertical-align:middle">

## Source and search

You can find thousands uicon in [IconPlanet website](https://iconplanet.app/). 

## About

Install the latest version of Uicons – which includes each individual icon in SVG format, CSS stylesheets and font files – and easily keep your project up to date with the latest icons and enhancements through the npm package manager.

## npm package

You can find this package page on ```npm``` [here](https://www.npmjs.com/package/@iconplanet/uicons).

## Github repository

Also can give us new star ⭐️ on [```IconPlanet GitHub repo```](https://github.com/iconplanetapp/uicons) to support us.

<br>

# Get Started

## Installation

Install latest version of IconPlanet uicons package with ```npm``` package manager:

``` js
npm i @iconplanet/uicons
```

In short, with this method you get the same result as with the downloadable format but in an easier-to-update package.

This package contains the following directories and files:

| Path     | What it is                   |
|----------|------------------------------|
| /css     | Stylesheets for Web Fonts    |
| /svg     | Individual SVG for each icon |
| /webfont | Web Font files used with CSS |

<br>

## CSS @import

### 1. Import all packages
You can import all available packages with importing this file:

``` css
@import '@iconplanet/uicons/css/ip-all';
```

<br>

### 2. Single style 
Or just import certain packages individually:

``` css
@import '@iconplanet/uicons/css/ip-[PACKAGE-NAME]';

@import '@iconplanet/uicons/css/ip-brands';
```

|  **Package Name** | **Prefix** |              **Example**               |
|-------------------|------------|----------------------------------------|
| brands            | ip-brands  | &lt;i class="ip-brands-instagram"></i> |
| awesome-regular   | ip-ar      | &lt;i class="ip-ar-user"></i>          |
| flat-bold-rounded | ip-fbr     | &lt;i class="ip-fbr-home"></i>         |

## Use icons

``` html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Iconic Project</title>
    <!-- you should import IconPlanet Uicons css files inside this file -->
    <link rel="stylesheet" href="[/path-to-your-project/css-file.css]"/>
  </head>
  <body>
    <i class="ip-brands-instagram"></i>
    <i class="ip-ar-book"></i>
    <i class="ip-frr-user"></i>
    <i class="ip-fbr-arrow-right"></i>
  </body>
</html>
```
npm package: @icons-pack/react-simple-icons
Description: This package provides the Simple Icons packaged as a set of React components.
Author: Jorge Luis Calleja
Latest version: 13.13.0

<div align="center">
  <img alt="react simple icons" src="https://github.com/icons-pack/react-simple-icons/blob/main/docs/images/svg/react-simple-icons.svg" width="150" />

# react-simple-icons

This package provides the [Simple Icons 16.12.0](https://github.com/simple-icons/simple-icons/releases/tag/16.12.0)
packaged as a set of [React](https://facebook.github.io/react/) components.

  [![www.npmjs.com!](https://img.shields.io/npm/v/@icons-pack/react-simple-icons?color=CB061D&style=flat-square)](https://www.npmjs.com/package/@icons-pack/react-simple-icons)
  [![downloads](https://img.shields.io/npm/dw/@icons-pack/react-simple-icons?color=087BB4&style=flat-square)](https://www.npmjs.com/package/@icons-pack/react-simple-icons)
  [![license](https://img.shields.io/npm/l/@icons-pack/react-simple-icons?color=008660&style=flat-square)](https://github.com/icons-pack/react-simple-icons/blob/main/LICENSE)
</div>

## Installation

Install the package in your project directory with:

```shell
npm add @icons-pack/react-simple-icons
```

## Usage

You can use [simpleicons.org](https://simpleicons.org) to find a specific icon. When importing an icon, keep in mind
that the names of the icons are [upperCamelCase](https://github.com/samverschueren/uppercamelcase) , for instance:

- [`Material Design`](https://simpleicons.org/?q=material) is exposed as
  `{ SiMaterialdesign } from @icons-pack/react-simple-icons`
- [`azure devOps`](https://simpleicons.org/?q=azure%20devOps) is exposed as
  `{ SiAzuredevops } from @icons-pack/react-simple-icons`

## Basic example

```jsx
import { SiReact } from '@icons-pack/react-simple-icons';

function BasicExample() {
  return <SiReact color='#61DAFB' size={24} />;
}
```

## Change title

`@icons-pack/react-simple-icons` provides a default title referring to the component name

> The `<title>` element provides an accessible, short-text description of any SVG container element or graphics element.

```jsx
import { SiReact } from '@icons-pack/react-simple-icons';

// title default "React"
function ChangeTitle() {
  return <SiReact title='My title' color='#61DAFB' size={24} />;
}
```

## Use default color

Set color as `default` to use the default color for each icon

```jsx
import { SiReact } from '@icons-pack/react-simple-icons';

function DefaultColorExample() {
  return <SiReact color='default' size={24} />;
}
```

### Use default color as hex

Append `Hex` to the icon name to use the default color as hex string

```jsx
import { SiReact, SiReactHex } from '@icons-pack/react-simple-icons';

function DefaultColorExample() {
  return <SiReact color={SiReactHex} size={24} />;
}
```

## Custom styles

```jsx
import { SiReact } from '@icons-pack/react-simple-icons';

function CustomStyles() {
  return <SiReact className='myStyle' />;
}
```

```css
.myStyle {
  width: 35px;
  height: 35px;
}
```
npm package: @iconsans/react
Description: +320 Free Bold and Linear Icons for your next project
Author: Morteza Sabihi
Latest version: 1.0.6

# Iconsans icons for React

Available for the framework 👉 [Vue](https://github.com/mortezasabihi/iconsans/tree/main/packages/vue)

## Installation

Install with npm

```bash
  npm install @iconsans/react
```

Install with pnpm

```bash
  pnpm add @iconsans/react
```

Install with yarn

```bash
  yarn add @iconsans/react
```

## Usage/Examples

```jsx
import { Play as PlayBold } from "@iconsans/react/bold";
import { Play as PlayLinear } from "@iconsans/react/linear";

export default function App() {
  return (
    <>
      <PlayBold />
      <PlayLinear />
    </>
  );
}
```

## Icons

You can see the list of available icons on [https://mortezasabihi.github.io/iconsans/](https://mortezasabihi.github.io/iconsans/)
npm package: @iconsans/vue
Description: +320 Free Bold and Linear Icons for your next project
Author: Morteza Sabihi
Latest version: 1.0.3

# Iconsans icons for Vue

Available for the framework 👉 [React](https://github.com/mortezasabihi/iconsans/tree/main/packages/react)

## Installation

Install with npm

```bash
  npm install @iconsans/vue
```

Install with pnpm

```bash
  pnpm add @iconsans/vue
```

Install with yarn

```bash
  yarn add @iconsans/vue
```

## Usage/Examples

```javascript
<script setup lang="ts">
    import { Play as PlayBold } from "@iconsans/vue/bold";
    import { Play as PlayLinear } from "@iconsans/vue/linear";
</script>


<template>
    <PlayBold />
    <PlayLinear />
</template>
```

## Icons

You can see the list of available icons on [https://mortezasabihi.github.io/iconsans/](https://mortezasabihi.github.io/iconsans/)