React Native Vector Icons

This package allows you to use Brightlayer UI supplemental icons in the same way as you use react-native-vector-icons for Material Icons.

Installation for RN CLI

To install the Brightlayer UI react native vector icons from NPM as a dependency for your project, you can run one of the following commands in your project root:

npm install --save @brightlayer-ui/react-native-vector-icons
or
yarn add @brightlayer-ui/react-native-vector-icons

This package relies on react-native-vector-icons as a peer dependency:

npm install --save react-native-vector-icons
or
yarn add react-native-vector-icons

Slashed SVG helpers in this package also require react-native-svg:

npm install --save react-native-svg
or
yarn add react-native-svg

Carefully follow the integration instructions in their documentation for making the icons available in your project.

iOS

To use this package in iOS projects, Edit your Info.plist

• Under the "UIAppFonts" key, add an entry for BrightlayerUIIcons.ttf.

<key>UIAppFonts</key>
<array>
  <string>BrightlayerUIIcons.ttf</string>
</array>

After updating these files you will need to install the Pods and recompile your application:

cd ios
pod install

Android

To use this package in Android projects, if you had previously provided the path for fonts.gradle under build.gradle you need to remove this path now:

Edit android/app/build.gradle ( NOT android/build.gradle ) and remove the following:

- apply from: "../../node_modules/@brightlayer-ui/react-native-vector-icons/fonts.gradle"

Installation for Expo

To install the Brightlayer UI React Native Vector Icons in your Expo project, run the following command in your project root:

yarn add @brightlayer-ui/react-native-vector-icons

Setup guide for Expo Apps

react-native-vector-icons supports Expo, and no further steps are required for native platforms, but you can optionally follow the steps below to set up the font config plugin.

Set up font config plugin

This is optional but recommended because through the config plugin, the icon font will be available in the app since build time, rather than being loaded at runtime - see more.

You need to use prebuild, to be able to use config plugins.

1. In your app.config.json / js, add the following:

module.exports = {
    expo: {
        plugins: [
            [
                'expo-font',
                {
                    fonts: ['./node_modules/@brightlayer-ui/react-native-vector-icons/Fonts/BrightlayerUIIcons.ttf'],
                },
            ],
        ],
    },
};

2. Run npx expo prebuild.
3. Rebuild the app: npx expo run:ios or npx expo run:android.

How to Fix iOS Issues

If you encounter issues with iOS builds, follow these steps to clean your environment and resolve common problems:

Clean Derived Data and iOS Build Artifacts

From your project root, run:

rm -rf ios/build
rm -rf ios/Pods
rm -rf ios/Podfile.lock
cd ios
pod install
cd ..

Clean Xcode derived data:

rm -rf ~/Library/Developer/Xcode/DerivedData

Regenerate Codegen Files (Expo Managed Workflow)

If you are using Expo prebuild (managed workflow), run:

npx expo prebuild --clean

Remove Font from iOS

If you need to remove the icon font from your iOS project:

1. Open your workspace in Xcode.
2. In the project navigator, locate the fonts folder under Resources.
3. Delete the reference to BrightlayerUIIcons.ttf.

Migration Guide

Follow this migration guide to know more about migration

Usage

Using these icons in your application is exactly the same as using react-native-vector-icons (we use their library to build ours so the API is identical).

import BLUIIcon from '@brightlayer-ui/react-native-vector-icons';
...
<BLUIIcon name={'broccoli'} color={'green'} size={24}/>

SVG Clip-Path Slashed Icons

If you need a true clip-path slash treatment (icon content cut out behind the slash), use the SlashedBLUISvgMaskIcon export with react-native-svg paths.

import { SlashedBLUISvgMaskIcon } from '@brightlayer-ui/react-native-vector-icons';
import { Path } from 'react-native-svg';

<SlashedBLUISvgMaskIcon slashColor={'#777'} slashLength={1.1} size={24}>
    <Path d="M3 3 H21 V21 H3 Z" fill="currentColor" />
</SlashedBLUISvgMaskIcon>;

If you want to pass a BLUI icon name directly (without creating Path children), use SlashedBLUIIcon:

import { SlashedBLUIIcon } from '@brightlayer-ui/react-native-vector-icons';

<SlashedBLUIIcon name={'device'} color={'currentColor'} slashColor={'#777'} slashLength={0.9} size={24} />;