ecklf / react-native-heroicons

React Native components for heroicons

React Native Heroicons

Heroicons are designed by Steve Schoger and published by Tailwind Labs.

A full directory of all available icons can be found here:

https://heroicons.com/

Installation

react-native-heroicons requires react-native-svg v9 or higher

yarn

yarn add react-native-heroicons react-native-svg

npm

npm i react-native-heroicons react-native-svg

Usage

Specific icons:

import React from "react";
import { View } from "react-native";
import { SparklesIcon as SparklesIconMicro } from "react-native-heroicons/micro";
// Old solid style from heroicons v1
import { SparklesIcon as SparklesIconMini } from "react-native-heroicons/mini";
import { SparklesIcon } from "react-native-heroicons/solid";
import { SparklesIcon as SparklesIconOutline } from "react-native-heroicons/outline";

const App = () => {
  return (
    <View>
      <SparklesIconMicro />
      <SparklesIconMini />
      <SparklesIcon />
      <SparklesIconOutline />
    </View>
  );
};

export default App;

Entire icon pack:

import React from "react";
import * as Icons from "react-native-heroicons/solid";

const App = () => {
  return <Icons.SparklesIcon />;
};

export default App;

Customization

Icons can be adjusted with the size prop.

Defaults are 16 for micro, 20 for mini and 24 for solid/outline):

import { SparklesIcon as SparklesIconOutline } from "react-native-heroicons/outline";
// ...
<SparklesIconOutline color="red" fill="black" size={42} />;

react-native-heroicons's Issues

new mini icons

Just wondering if you are going to do a release with the newly added mini icons?

Medium icon versions

Hey, this is an awesome repo! Many thanks.

Are there any plans to add the medium/non-solid versions of the icons?

strokeWidth prop

Great work here!
It's there a way to set the strokeWidth prop?

thank you

Support for solid icons

Hi! First, thanks for working on this, you save me a lot of time!.

I've opened this issue to know if it's expected to support solid icons or there is already any way to use it.

I could help with this in the future, but not right now (I'm too busy)

arrow-path icon missing

cannot import ArrowPathIcon (arrow-path) it is missing. but on heroicons weppage i have found it

Cannot find module 'react-native-heroicons' or its corresponding type declarations.ts(2307) on expo sdk 48

Crashes for all icons with the latest version of `react-native-svg`

Using [email protected], this package works great.

But if I upgrade to [email protected], I get the following error when using any components from the library:

"RNSVGPath" was not found in the UIManager

Missing some icons

Hi 👋,

Thanks for the awesome work creating and maintaining the react-native library for heroicons.

Seems it is missing some icons; in my case, I was looking for the wallet icon, which is missing. Guessing you built the last package before tailwindlabs fixed the missing icons in their package. tailwindlabs/heroicons#785

Can you please rebuild the package with new updates so that it can fix?

Thanks ❤️

Unable to use version 3.0.0

Since upgrading to version 3.0.0 I get the following error:
I also tried it with a new project.

expo: ~46.0.9,

Exception thrown while executing UI block: -[__NSDictionaryM firstObject]: unrecognized selector sent to instance 0x60000118f060

__53-[ABI46_0_0RCTUIManager flushUIBlocksWithCompletion:]_block_invoke
    ABI46_0_0RCTUIManager.m:1202
__53-[ABI46_0_0RCTUIManager flushUIBlocksWithCompletion:]_block_invoke.431
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_drain
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start_sim

0x0