open-index/open-npm huggingface dataset:
npm package: @impelsys/react-native-material-ui
Description: React Native Material Design Components
Latest version: 1.30.6

# React Native Material UI (iOS and Android supported)

Highly customizable material design components for React Native!

[![npm](https://img.shields.io/npm/v/react-native-material-ui.svg)](https://www.npmjs.com/package/react-native-material-ui)
[![codecov](https://codecov.io/gh/xotahal/react-native-material-ui/branch/master/graph/badge.svg)](https://codecov.io/gh/xotahal/react-native-material-ui)
[![npm](https://img.shields.io/npm/dm/react-native-material-ui.svg)](https://img.shields.io/npm/dm/react-native-material-ui.svg)
[![Dependencies](https://david-dm.org/xotahal/react-native-material-ui.svg)](https://david-dm.org/xotahal/react-native-material-ui.svg)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/xotahal/react-native-material-ui/master/LICENSE)

## Documentation

- [Getting Started](https://github.com/xotahal/react-native-material-ui/blob/master/docs/GettingStarted.md)
- [Usage](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Usage.md)
- [Demo & Examples](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Demo.md)
- [Components](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Components.md)

## Showroom

### [Savee.io](http://bit.ly/savee-io)

[iOS App](http://bit.ly/savee-ios) & [Android App](http://bit.ly/savee-android)

<img src="https://cdn-images-1.medium.com/max/2000/1*c4LrPZvMIgIZntDPfYDKFA.png" width="512px" />

### [Reservio](https://www.reservio.com/)

[iOS App](https://itunes.apple.com/us/app/reservio/id1314263364?mt=8) & [Android App](https://play.google.com/store/apps/details?id=com.reservio&hl=en)

<img src="https://lh3.googleusercontent.com/1wm87owPIRr_vp9FrroYuD4eusW2x8N7H7OdhP_B2ynLDIds6s83VAWKFz8xBa3NOh8=w1440-h620-rw" width="256px" /><img src="https://lh3.googleusercontent.com/AIDK60jiX6ldE9dZ4n5srJSG1sdeRKgsqIEdfdyCQvJcNY1rW7vCmHwvC6aOcLk7swE=w1440-h620-rw" width="256px" />

## Questions

If you need anything ping us on [twitter](https://twitter.com/xotahal).

| Jiri Otahal                                                                                                                                | Jan Ziemba                                                                                                                                 |
| ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
| [<img src="https://avatars3.githubusercontent.com/u/3531955?v=4" width="100px;" style="border-radius:50px"/>](https://twitter.com/xotahal) | [<img src="https://avatars1.githubusercontent.com/u/4710865?v=4" width="100px;" style="border-radius:50px"/>]() |
npm package: @imperatrona/heroicons-svelte
Description: <p align="center">   <a href="https://heroicons.com" target="_blank">     <picture>       <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-dark.svg">       <source media="(pref
Latest version: 0.0.1

<p align="center">
  <a href="https://heroicons.com" target="_blank">
    <picture>
      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-dark.svg">
      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-light.svg">
      <img alt="Heroicons" width="315" height="117" style="max-width: 100%" src="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-light.svg">
    </picture>
  </a>
</p>

<p align="center">Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.<p>

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

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

<p align="center">Using latest version of icons v2.2.0 from Nov 18, 2024 (latest release on Mar 13, 2026)</p>

## Basic Usage

First, install `@imperatrona/heroicons-svelte` from npm:

```sh
npm install @imperatrona/heroicons-svelte
```

```sh
bun install @imperatrona/heroicons-svelte
```

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

```svelte
<script>
  import { BeakerIcon } from '@imperatrona/heroicons-svelte/24/solid'
</script>

<BeakerIcon class="size-6 text-blue-500" />
```

Supported imports
```
@imperatrona/heroicons-svelte/16/solid
```
```
@imperatrona/heroicons-svelte/20/solid
```
```
@imperatrona/heroicons-svelte/24/solid
```
```
@imperatrona/heroicons-svelte/24/outline
```

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/@imperatrona/heroicons-svelte/icons/24/outline/)

## License

This library is MIT licensed.