Hero Icons for React Native. 🫡
import { HeroOutline } from '@nandorojo/heroicons'
export const Icon = () => <HeroOutline.AcademicCap />
react-native-svg
propsHeroicons is an awesome icon set made by the creators of Tailwind CSS . This library exports React Native components for each of its free icons, since their repo only supports React and Vue.
See the example snack 🍔.
This is a fork of my similar iconic
icon set for React Native: https://github.com/nandorojo/react-native-iconic
yarn add @nandorojo/heroicons react-native-svg
There are 2 ways to import the icons:
1. Single import
import { HeroOutline, HeroSolid, HeroSolid20 } from '@nandorojo/heroicons'
export const Icon = () => <HeroOutline.AcademicCap />
2. Tree-shaken import
Alternatively, you could import the icons individually.
While method 1 should tree shake since it's configured to use ESM with tree shaking optimizations, this import method is a safer bet if you're concerned about tree shaking.
import { AcademicCap } from '@nandorojo/heroicons/24/outline'
export const Icon = () => <AcademicCap />
The import paths are 20/solid
, 24/solid
, & 24/outline
.
You can also import * as HeroOutline
:
import * as HeroOutline from '@nandorojo/heroicons/24/outline'
export const Icon = () => <HeroOutline.AcademicCap />
For a full directory of components, see the Hero Icons website.
<AcademicCap color="black" />
<AcademicCap height={30} width={30} />
Each icon component accepts all the props from react-native-svg
's Svg
component. Reference their docs.
This library uses react-native-svg
. The components are generated by svgr
. I downloaded all the free icons from heroicons and ran a script to codegen the files from there.
Since Heroicons updates their icons somewhat frequently, you may want to import the new ones. These are the steps to update this library with new icons:
generate/hero/optimized
folder with the the optimized
folder from their repositoryyarn install
and yarn prepare
There weren't any answers on this discussion so I decided to make it myself.
PS after building this, I found this similar library too.