React Native Vector Icons

https://github.com/oblador/react-native-vector-icons
Admin
React Native Vector Icons is a customizable vector icons library for React Native, ideal for...
Tokens:69,404
Snippets:673
Trust Score:9.9
License:MIT
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Start the example app

Source: https://github.com/oblador/react-native-vector-icons/blob/master/docs/CREATE_FONT_PACKAGE.md

Run the example app to test your font package. Use 'pnpm run example start' to launch, then 'pnpm run example android' or 'pnpm run example ios' for a specific platform.

```sh
# Start the example app (see CONTRIBUTING.md for details)
pnpm run example start
pnpm run example android  # or ios
```

--------------------------------

### Run example with new architecture on iOS

Source: https://github.com/oblador/react-native-vector-icons/blob/master/CONTRIBUTING.md

Sets RCT_NEW_ARCH_ENABLED=1, installs pods, and runs the example app on iOS with the new architecture. Ensure build folders are cleaned if switching architectures.

```sh
RCT_NEW_ARCH_ENABLED=1 pod install example/ios
pnpm run example ios
```

--------------------------------

### Start the packager

Source: https://github.com/oblador/react-native-vector-icons/blob/master/CONTRIBUTING.md

Starts the Metro packager for the example app. Use this to test changes to the library's JavaScript code, which will be reflected without a rebuild.

```sh
pnpm run example start
```

--------------------------------

### Install icon packages with npm

Source: https://github.com/oblador/react-native-vector-icons/blob/master/README.md

Install the icon packages for the icons you want to use. This example installs FontAwesome Free Solid and Lucide packages.

```sh
npm install @react-native-vector-icons/fontawesome-free-solid @react-native-vector-icons/lucide
```

--------------------------------

### Run example app on iOS

Source: https://github.com/oblador/react-native-vector-icons/blob/master/CONTRIBUTING.md

Builds and runs the example app on an iOS simulator or device. Native code changes require a rebuild of the example app.

```sh
pnpm run example ios
```

--------------------------------

### Run example app on Android

Source: https://github.com/oblador/react-native-vector-icons/blob/master/CONTRIBUTING.md

Builds and runs the example app on an Android emulator or device. Native code changes require a rebuild of the example app.

```sh
pnpm run example android
```

--------------------------------

### Install Fontawesome Free Solid

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-free-solid/README.md

Install the package via npm.

```sh
npm install @react-native-vector-icons/fontawesome-free-solid
```

--------------------------------

### Install the font package

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-sharp-duotone-light/README.md

Install the @react-native-vector-icons/fontawesome-pro-sharp-duotone-light package using npm.

```sh
npm install @react-native-vector-icons/fontawesome-pro-sharp-duotone-light
```

--------------------------------

### Install Foundation package

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/foundation/README.md

Install the Foundation icon package via npm.

```sh
npm install @react-native-vector-icons/foundation
```

--------------------------------

### Install Lucide package

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/lucide/README.md

Install the Lucide icon package via npm.

```sh
npm install @react-native-vector-icons/lucide
```

--------------------------------

### Install Fontawesome Free Regular with npm

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-free-regular/README.md

Install the package using npm. This is the first step before using the icons.

```sh
npm install @react-native-vector-icons/fontawesome-free-regular
```

--------------------------------

### Install @react-native-vector-icons/icomoon

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/icomoon/README.md

Install the package via npm.

```sh
npm install @react-native-vector-icons/icomoon
```

--------------------------------

### Install the fontawesome-pro-sharp-duotone-solid package

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-sharp-duotone-solid/README.md

Run this command to install the package via npm. The package does not include the fonts; you must provide them yourself.

```sh
npm install @react-native-vector-icons/fontawesome-pro-sharp-duotone-solid
```

--------------------------------

### Install Fontisto package

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontisto/README.md

Install the Fontisto icon package via npm.

```sh
npm install @react-native-vector-icons/fontisto
```

--------------------------------

### Install @react-native-vector-icons/entypo

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/entypo/README.md

Install the Entypo font package using npm.

```sh
npm install @react-native-vector-icons/entypo
```

--------------------------------

### Run example with new architecture on Android

Source: https://github.com/oblador/react-native-vector-icons/blob/master/CONTRIBUTING.md

Sets the ORG_GRADLE_PROJECT_newArchEnabled environment variable to true and runs the example app on Android with the new architecture. Ensure build folders are cleaned if switching architectures.

```sh
ORG_GRADLE_PROJECT_newArchEnabled=true pnpm run example android
```

--------------------------------

### Install @react-native-vector-icons/fontello

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontello/README.md

Install the fontello package via npm.

```sh
npm install @react-native-vector-icons/fontello
```

--------------------------------

### Install the fontawesome-pro-sharp-duotone-regular package

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-sharp-duotone-regular/README.md

Install the package using npm. The package does not include the fonts; you must provide them yourself.

```sh
npm install @react-native-vector-icons/fontawesome-pro-sharp-duotone-regular
```

--------------------------------

### Install the fontawesome-pro-duotone-thin package

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-duotone-thin/README.md

Install the package using npm. The package does not include the fonts; you must provide them yourself.

```sh
npm install @react-native-vector-icons/fontawesome-pro-duotone-thin
```

--------------------------------

### Basic Example: Render an IonIcons icon

Source: https://github.com/oblador/react-native-vector-icons/blob/master/README.md

Import IonIcons from the static entry point and render an icon with name, size, and color props.

```js
import { IonIcons } from "@react-native-vector-icons/ionicons/static";

const ExampleView = () => (
  <IonIcons name="ios-person" size={30} color="#4F8EF7" />
);
```

--------------------------------

### Install Material Icons package

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/material-icons/README.md

Install the Material Icons package using npm.

```sh
npm install @react-native-vector-icons/material-icons
```

--------------------------------

### Install the fontawesome-pro-sharp-thin package

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-sharp-thin/README.md

Run this npm command to install the package. Note that this package does not include the fonts; you must provide them yourself.

```sh
npm install @react-native-vector-icons/fontawesome-pro-sharp-thin
```

--------------------------------

### Install the fontawesome-pro-light package

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-light/README.md

Install the package using npm. This package does not include the fonts; you must provide them yourself.

```sh
npm install @react-native-vector-icons/fontawesome-pro-light
```

--------------------------------

### Install Octicons package with npm

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/octicons/README.md

Run this command to install the @react-native-vector-icons/octicons package.

```sh
npm install @react-native-vector-icons/octicons
```

--------------------------------

### meta object example

Source: https://github.com/oblador/react-native-vector-icons/blob/master/docs/CREATE_FONT_PACKAGE.md

Example configuration for the meta property, used for multi-style fonts. Defines default style, style names, and per-style font details.

```json
{
  "defaultStyleName": "regular",
  "styleNames": ["regular", "solid", "brand"],
  "styles": {
    "regular": {
      "family": "FontAwesome6Free-Regular",
      "name": "FontAwesome6_Regular.ttf",
      "weight": 400
    }
  }
}
```

--------------------------------

### Install @react-native-vector-icons/simple-line-icons

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/simple-line-icons/README.md

Install the Simple Line Icons font package via npm.

```sh
npm install @react-native-vector-icons/simple-line-icons
```

--------------------------------

### Install the font package with npm

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/generator-react-native-vector-icons/src/app/templates/README.md

Run this command to install the font package. The package name is a template placeholder that will be replaced during generation.

```sh
npm install @react-native-vector-icons/<%= packageName %>
```

--------------------------------

### Install iOS pods

Source: https://github.com/oblador/react-native-vector-icons/blob/master/docs/SETUP-REACT-NATIVE.md

Run this command in the ios directory to install CocoaPods dependencies for the iOS project.

```sh
cd ios && pod install
```

--------------------------------

### Install Fontawesome Pro Duotone Light package

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-duotone-light/README.md

Install the package using npm. This package does not include the fonts; you must provide them yourself.

```sh
npm install @react-native-vector-icons/fontawesome-pro-duotone-light
```

--------------------------------

### Install @react-native-vector-icons/fontawesome

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome/README.md

Install the Fontawesome font package via npm.

```sh
npm install @react-native-vector-icons/fontawesome
```

--------------------------------

### Install Ionicons package

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/ionicons/README.md

Install the Ionicons font package using npm.

```sh
npm install @react-native-vector-icons/ionicons
```

--------------------------------

### Test a specific React Native version

Source: https://github.com/oblador/react-native-vector-icons/blob/master/apps/icon-explorer/README.md

Use these commands to locally test a particular React Native version. The script sets the version, then installs dependencies, starts the app, runs Android tests, and restores changes.

```sh
./set-rn-version.sh android stable|0.73|0.72...
pnpm install
pnpm run start
pnpm run test:android
git restore -p
```

--------------------------------

### versions array example

Source: https://github.com/oblador/react-native-vector-icons/blob/master/docs/CREATE_FONT_PACKAGE.md

Example of the versions property, which tracks version history. Updated when a new upstream font version is released.

```json
[
  { "rnvi": "12.0.0", "upstream": "4.29.2" },
  { "rnvi": "12.0.1", "upstream": "4.30.0" }
]
```

--------------------------------

### Import and use Ionicons component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/ionicons/README.md

Import Ionicons from the static or dynamic module and render an icon with name, color, and size props. The dynamic import requires the Expo setup guide for font loading.

```jsx
import { Ionicons } from '@react-native-vector-icons/ionicons/static';
// or with dynamic font loading (see the Expo setup guide for details)
import { Ionicons } from '@react-native-vector-icons/ionicons';

// ...

<Ionicons name="house" color="#ff0000" size={20} />
```

--------------------------------

### Install Pro fonts with npx fa-upgrade6

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome6-pro/README.md

Run this command to upgrade to the Pro version. It will install the fonts in the `rnvi-fonts/fontawesome6-pro` directory. The destination folder can be customized by providing an argument.

```bash
npx fa-upgrade6
```

--------------------------------

### Install Fontawesome Pro Thin package

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-thin/README.md

Install the @react-native-vector-icons/fontawesome-pro-thin package via npm.

```sh
npm install @react-native-vector-icons/fontawesome-pro-thin
```

--------------------------------

### Install @react-native-vector-icons/fontawesome-free-brands

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-free-brands/README.md

Install the Fontawesome Free Brands font package via npm.

```shell
npm install @react-native-vector-icons/fontawesome-free-brands
```

--------------------------------

### Install @react-native-vector-icons/fontawesome-pro-sharp-duotone-thin

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-sharp-duotone-thin/README.md

Install the package using npm. The package does not include the fonts; you must provide them yourself.

```sh
npm install @react-native-vector-icons/fontawesome-pro-sharp-duotone-thin
```

--------------------------------

### Install Pro fonts with npx fa-upgrade5

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome5-pro/README.md

Run this command to upgrade to FontAwesome 5 Pro. It will install fonts in the rnvi-fonts/fontawesome5-pro directory. The destination folder can be customized by passing an argument.

```bash
npx fa-upgrade5
```

--------------------------------

### Use Fontisto icon component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontisto/README.md

Import the Fontisto component and render an icon. Use the static import for static font loading, or the dynamic import for dynamic font loading (see Expo setup guide).

```jsx
import { Fontisto } from '@react-native-vector-icons/fontisto/static';
// or with dynamic font loading (see the Expo setup guide for details)
import { Fontisto } from '@react-native-vector-icons/fontisto';

// ...

<Fontisto name="house" color="#ff0000" size={20} />
```

--------------------------------

### Example UIAppFonts entries in Info.plist

Source: https://github.com/oblador/react-native-vector-icons/blob/master/docs/SETUP-REACT-NATIVE.md

Shows the expected XML structure for the UIAppFonts key in Info.plist after running the update script. This is an example of the fonts that could be present.

```xml
    <key>UIAppFonts</key>
    <array>
      <string>FontAwesome6_Brands.ttf</string>
      <string>FontAwesome6_Regular.ttf</string>
      <string>FontAwesome6_Solid.ttf</string>
      <string>Octicons.ttf</string>
    </array>
```

--------------------------------

### Install Material Design Icons package

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/material-design-icons/README.md

Install the @react-native-vector-icons/material-design-icons package via npm.

```sh
npm install @react-native-vector-icons/material-design-icons
```

--------------------------------

### Install @react-native-vector-icons/ant-design

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/ant-design/README.md

Install the Ant Design font package via npm.

```sh
npm install @react-native-vector-icons/ant-design
```

--------------------------------

### Import and use Lucide icon

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/lucide/README.md

Import the Lucide component and render an icon with name, color, and size props. Use the static import for static font loading, or the dynamic import for dynamic font loading (see Expo setup guide).

```jsx
import { Lucide } from '@react-native-vector-icons/lucide/static';
// or with dynamic font loading (see the Expo setup guide for details)
import { Lucide } from '@react-native-vector-icons/lucide';

// ...

<Lucide name="house" color="#ff0000" size={20} />
```

--------------------------------

### Install Evil Icons package

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/evil-icons/README.md

Install the @react-native-vector-icons/evil-icons package via npm.

```sh
npm install @react-native-vector-icons/evil-icons
```

--------------------------------

### Install the fontawesome-pro-brands package

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-brands/README.md

Install the package via npm. This package does not include the fonts; you must provide them yourself.

```sh
npm install @react-native-vector-icons/fontawesome-pro-brands
```

--------------------------------

### Install Android system image and create AVD for tests

Source: https://github.com/oblador/react-native-vector-icons/blob/master/CONTRIBUTING.md

Installs the Android 31 system image and creates an AVD named 'test' based on the Pixel 6 Pro profile. This is essential for screenshot diffs to work.

```sh
sdkmanager --install 'system-images;android-31;default;x86_64' --channel=0
avdmanager create avd --force -n test --abi 'default/x86_64' --package 'system-images;android-31;default;x86_64' --device 'pixel_6_pro'
```

--------------------------------

### Install Zocial package with npm

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/zocial/README.md

Install the Zocial font package using npm. This is the required first step before using the icons.

```sh
npm install @react-native-vector-icons/zocial
```

--------------------------------

### Install dependencies with pnpm

Source: https://github.com/oblador/react-native-vector-icons/blob/master/CONTRIBUTING.md

Run this command in the root directory to install all required dependencies for the monorepo packages. The project relies on pnpm workspaces, so npm cannot be used for development.

```sh
pnpm install
```

--------------------------------

### Install @react-native-vector-icons/fontawesome-pro-duotone-regular

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-duotone-regular/README.md

Install the package via npm. The package does not include the fonts; you must provide them yourself.

```sh
npm install @react-native-vector-icons/fontawesome-pro-duotone-regular
```

--------------------------------

### Install @react-native-vector-icons/fontawesome-pro-solid

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-solid/README.md

Install the package via npm. The package does not include fonts; you must provide them yourself.

```sh
npm install @react-native-vector-icons/fontawesome-pro-solid
```

--------------------------------

### Install the package with npm

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-regular/README.md

Install the Fontawesome Pro Regular package using npm. This package does not include the fonts; you must provide them yourself.

```sh
npm install @react-native-vector-icons/fontawesome-pro-regular
```

--------------------------------

### Use FontAwesomeProSharpSolid component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-sharp-solid/README.md

Import the FontAwesomeProSharpSolid component and render it with a name, color, and size. This example uses the 'house' icon.

```jsx
import { FontAwesomeProSharpSolid } from '@react-native-vector-icons/fontawesome-pro-sharp-solid';

// ...

<FontAwesomeProSharpSolid name="house" color="#ff0000" size={20} />
```

--------------------------------

### Use FontAwesomeProSharpThin component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-sharp-thin/README.md

Import the FontAwesomeProSharpThin component and render it with a name, color, and size. This example shows a house icon in red with size 20.

```jsx
import { FontAwesomeProSharpThin } from '@react-native-vector-icons/fontawesome-pro-sharp-thin';

// ...

<FontAwesomeProSharpThin name="house" color="#ff0000" size={20} />
```

--------------------------------

### Use FontAwesomeProSharpLight component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-sharp-light/README.md

Import the FontAwesomeProSharpLight component and use it with a name, color, and size. The example shows a house icon in red with size 20.

```jsx
import { FontAwesomeProSharpLight } from '@react-native-vector-icons/fontawesome-pro-sharp-light';

// ...

<FontAwesomeProSharpLight name="house" color="#ff0000" size={20} />
```

--------------------------------

### Install the fontawesome-pro-sharp-solid package

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-sharp-solid/README.md

Use npm to install the @react-native-vector-icons/fontawesome-pro-sharp-solid package. This package does not include the fonts; you must provide them yourself.

```sh
npm install @react-native-vector-icons/fontawesome-pro-sharp-solid
```

--------------------------------

### Install Feather package with npm

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/feather/README.md

Install the Feather icon package using npm. This is the required first step before using the icons.

```sh
npm install @react-native-vector-icons/feather
```

--------------------------------

### Expo config plugin setup

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/foundation/README.md

Add the Foundation config plugin to the plugins array in app.json or app.config.js when using static imports.

```json
{
  "expo": {
    "plugins": ["@react-native-vector-icons/foundation"]
  }
}
```

--------------------------------

### Expo config plugin setup

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/entypo/README.md

Add the Entypo config plugin to the plugins array in app.json or app.config.js for static imports.

```json
{
  "expo": {
    "plugins": ["@react-native-vector-icons/entypo"]
  }
}
```

--------------------------------

### Install Fontawesome Pro Duotone Solid package

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-duotone-solid/README.md

Install the @react-native-vector-icons/fontawesome-pro-duotone-solid package via npm. This package does not include the fonts; you must provide them yourself.

```sh
npm install @react-native-vector-icons/fontawesome-pro-duotone-solid
```

--------------------------------

### Import and use FontAwesome icon component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome/README.md

Shows static and dynamic import options for the FontAwesome component, and a usage example with name, color, and size props.

```jsx
import { FontAwesome } from '@react-native-vector-icons/fontawesome/static';
// or with dynamic font loading (see the Expo setup guide for details)
import { FontAwesome } from '@react-native-vector-icons/fontawesome';

// ...

<FontAwesome name="house" color="#ff0000" size={20} />
```

--------------------------------

### Import and use Octicons component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/octicons/README.md

Shows how to import Octicons from the static or dynamic entry point and render an icon with name, color, and size props. The dynamic import requires Expo setup for font loading.

```jsx
import { Octicons } from '@react-native-vector-icons/octicons/static';
// or with dynamic font loading (see the Expo setup guide for details)
import { Octicons } from '@react-native-vector-icons/octicons';

// ...

<Octicons name="house" color="#ff0000" size={20} />
```

--------------------------------

### Import and use AntDesign icon component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/ant-design/README.md

Shows static and dynamic import options for the AntDesign component, with an example usage of the icon component.

```jsx
import { AntDesign } from '@react-native-vector-icons/ant-design/static';
// or with dynamic font loading (see the Expo setup guide for details)
import { AntDesign } from '@react-native-vector-icons/ant-design';

// ...

<AntDesign name="house" color="#ff0000" size={20} />
```

--------------------------------

### Use FontAwesomeProDuotoneSolid component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-duotone-solid/README.md

Import the FontAwesomeProDuotoneSolid component and use it with name, color, and size props. This is a JSX example.

```jsx
import { FontAwesomeProDuotoneSolid } from '@react-native-vector-icons/fontawesome-pro-duotone-solid';

// ...

<FontAwesomeProDuotoneSolid name="house" color="#ff0000" size={20} />
```

--------------------------------

### createIconSetFromIcoMoon and createIconSetFromFontello rewritten

Source: https://github.com/oblador/react-native-vector-icons/blob/master/MIGRATION.md

Both imports and call signatures are rewritten. The fontello example shows the new call signature with a fontSource option.

```diff
-import createIconSetFromFontello from '@expo/vector-icons/createIconSetFromFontello';
+import createIconSetFromFontello from '@react-native-vector-icons/fontello';

-createIconSetFromFontello(fontelloConfig, 'fontello', require('./fontello.ttf'));
+createIconSetFromFontello(fontelloConfig, {
+  fontSource: require('./fontello.ttf')
+});
```

--------------------------------

### Create font package directory and config

Source: https://github.com/oblador/react-native-vector-icons/blob/master/docs/CREATE_FONT_PACKAGE.md

Creates the package directory, opens the .yo-rc.json file for editing, and stages it with git.

```sh
mkdir packages/my-font
vi packages/my-font/.yo-rc.json
git add packages/my-font/.yo-rc.json
```

--------------------------------

### Using getImageSource (async) to get a bitmap image source

Source: https://github.com/oblador/react-native-vector-icons/blob/master/README.md

Asynchronous method to get an ImageResult object. Can be called with positional arguments or an options object. Returns a promise.

```jsx
const source = await Icon.getImageSource('user', 20, 'red');
// or with an options object:
const source = await Icon.getImageSource('user', { size: 20, color: 'red' });
```

--------------------------------

### Use FontAwesomeProSolid component in JSX

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-solid/README.md

Import the FontAwesomeProSolid component and render it with a name, color, and size. This example shows a house icon in red at size 20.

```jsx
import { FontAwesomeProSolid } from '@react-native-vector-icons/fontawesome-pro-solid';

// ...

<FontAwesomeProSolid name="house" color="#ff0000" size={20} />
```

--------------------------------

### Switch React Native version for tests

Source: https://github.com/oblador/react-native-vector-icons/blob/master/CONTRIBUTING.md

Use the set-rn-version script to switch between new and old architecture versions before running tests. The example shows switching to new 0.74 and old 0.79.

```sh
cd packages/icon-explorer
# ./set-rn-version <arch> <version>
./set-rn-version new 0.74
./set-rn-version old 0.79
```

--------------------------------

### Use FontAwesomeFreeSolid component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-free-solid/README.md

Import the component from the static or dynamic module and render an icon. The static import is recommended for static font loading; the dynamic import is for Expo setups.

```jsx
import { FontAwesomeFreeSolid } from '@react-native-vector-icons/fontawesome-free-solid/static';
// or with dynamic font loading (see the Expo setup guide for details)
import { FontAwesomeFreeSolid } from '@react-native-vector-icons/fontawesome-free-solid';

// ...

<FontAwesomeFreeSolid name="house" color="#ff0000" size={20} />
```

--------------------------------

### Using getImageSourceSync to get a bitmap image source

Source: https://github.com/oblador/react-native-vector-icons/blob/master/README.md

Synchronous method to get an ImageResult object. Can be called with positional arguments or an options object. Blocking and may incur performance penalties, but subsequent calls use cache.

```jsx
const source = Icon.getImageSourceSync('user', 20, 'red');
// or with an options object:
const source = Icon.getImageSourceSync('user', { size: 20, color: 'red', lineHeight: 28 });

return <Image source={source} />;
```

--------------------------------

### Import and use FontAwesomeFreeBrands component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-free-brands/README.md

Import the FontAwesomeFreeBrands component from the static or dynamic module and render it with a name, color, and size. The dynamic import requires Expo setup for font loading.

```jsx
import { FontAwesomeFreeBrands } from '@react-native-vector-icons/fontawesome-free-brands/static';
// or with dynamic font loading (see the Expo setup guide for details)
import { FontAwesomeFreeBrands } from '@react-native-vector-icons/fontawesome-free-brands';

// ...

<FontAwesomeFreeBrands name="house" color="#ff0000" size={20} />
```

--------------------------------

### Import and use Feather icon in React Native

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/feather/README.md

Shows how to import the Feather component, either from the static path or with dynamic font loading, and render an icon with name, color, and size props. The static import requires the Expo config plugin setup.

```jsx
import { Feather } from '@react-native-vector-icons/feather/static';
// or with dynamic font loading (see the Expo setup guide for details)
import { Feather } from '@react-native-vector-icons/feather';

// ...

<Feather name="house" color="#ff0000" size={20} />
```

--------------------------------

### react-native.config.js: remove react-native-vector-icons entries

Source: https://github.com/oblador/react-native-vector-icons/blob/master/MIGRATION.md

Manual step: remove any react-native-vector-icons entries from react-native.config.js. The example shows a module.exports with a dependencies object that should be removed.

```javascript
// Remove entries like this:
module.exports = {
  dependencies: {
    "react-native-vector-icons": {
      platforms: { ios: null },
    },
  },
};
```

--------------------------------

### Import and use SimpleLineIcons component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/simple-line-icons/README.md

Import the SimpleLineIcons component from the static or dynamic module and render an icon with name, color, and size props. The dynamic import is used for Expo setups with dynamic font loading.

```jsx
import { SimpleLineIcons } from '@react-native-vector-icons/simple-line-icons/static';
// or with dynamic font loading (see the Expo setup guide for details)
import { SimpleLineIcons } from '@react-native-vector-icons/simple-line-icons';

// ...

<SimpleLineIcons name="house" color="#ff0000" size={20} />
```

--------------------------------

### Type-checked icon names with TypeScript

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontello/README.md

Use a union of icon names as a generic parameter to get type-checking and autocomplete on the name prop.

```tsx
import createIconSet from '@react-native-vector-icons/fontello';
import fontelloConfig from './config.json';
const Icon = createIconSet<'home' | 'settings' | 'user'>(fontelloConfig);

<Icon name="home" />     // ok
<Icon name="invalid" />  // type error
```

--------------------------------

### Use FontAwesomeProThin component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-thin/README.md

Import and use the FontAwesomeProThin component in a React Native app. The example shows a house icon with red color and size 20.

```jsx
import { FontAwesomeProThin } from '@react-native-vector-icons/fontawesome-pro-thin';

// ...

<FontAwesomeProThin name="house" color="#ff0000" size={20} />
```

--------------------------------

### Manual font renaming table

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome6-pro/README.md

When installing manually, copy the Pro fonts into `rnvi-fonts/fontawesome6-pro` and rename them exactly as shown. Android loads fonts by filename, so keeping original names causes icons to render incorrectly.

```markdown
| Font Awesome npm filename  | Required filename                    |
| -------------------------- | ------------------------------------ |
| `fa-brands-400.ttf`        | `FontAwesome6_Pro_Brands.ttf`        |
| `fa-duotone-900.ttf`       | `FontAwesome6_Pro_Duotone.ttf`       |
| `fa-light-300.ttf`         | `FontAwesome6_Pro_Light.ttf`         |
| `fa-regular-400.ttf`       | `FontAwesome6_Pro_Regular.ttf`       |
| `fa-sharp-light-300.ttf`   | `FontAwesome6_Pro_Sharp_Light.ttf`   |
| `fa-sharp-regular-400.ttf` | `FontAwesome6_Pro_Sharp_Regular.ttf` |
| `fa-sharp-solid-900.ttf`   | `FontAwesome6_Pro_Sharp_Solid.ttf`   |
| `fa-sharp-thin-100.ttf`    | `FontAwesome6_Pro_Sharp_Thin.ttf`    |
| `fa-solid-900.ttf`         | `FontAwesome6_Pro_Solid.ttf`         |
| `fa-thin-100.ttf`          | `FontAwesome6_Pro_Thin.ttf`          |
```

--------------------------------

### FontAwesome style prop transforms: boolean to iconStyle

Source: https://github.com/oblador/react-native-vector-icons/blob/master/MIGRATION.md

Converts boolean style props on FontAwesome 5/6 components to the iconStyle prop. The diff shows examples for FontAwesome5, FontAwesome6, and FontAwesome6Pro. All FontAwesome styles are handled: solid, brand, light, thin, duotone, sharp, sharpSolid, sharpLight. The codemod matches components named FontAwesome5, FontAwesome6, FontAwesome5Pro, FontAwesome6Pro, or Icon; if imported under a different name, style props must be updated manually.

```diff
-<FontAwesome5 name="heart" solid />
+<FontAwesome5 name="heart" iconStyle="solid" />

-<FontAwesome6 name="github" brand />
+<FontAwesome6 name="github" iconStyle="brand" />

-<FontAwesome6Pro name="star" light />
+<FontAwesome6Pro name="star" iconStyle="light" />
```

--------------------------------

### Run generate from repository root

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/generator-react-native-vector-icons/README.md

Run this command from the root of the repository to generate the individual icon packages.

```bash
pnpm run generate
```

--------------------------------

### Use the FontAwesomeProSharpDuotoneLight component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-sharp-duotone-light/README.md

Import the FontAwesomeProSharpDuotoneLight component and render it with a name, color, and size.

```jsx
import { FontAwesomeProSharpDuotoneLight } from '@react-native-vector-icons/fontawesome-pro-sharp-duotone-light';

// ...

<FontAwesomeProSharpDuotoneLight name="house" color="#ff0000" size={20} />
```

--------------------------------

### Run unit tests

Source: https://github.com/oblador/react-native-vector-icons/blob/master/CONTRIBUTING.md

Runs the unit tests for the project. Add tests for your change if possible.

```sh
pnpm run test
```

--------------------------------

### Fetch pro fonts for icon-explorer

Source: https://github.com/oblador/react-native-vector-icons/blob/master/CONTRIBUTING.md

Run this command from the icon-explorer package directory to download FontAwesome Pro v5 and v6 fonts and place them in the expected directories.

```sh
cd packages/icon-explorer
pnpm fetch-pro-fonts
```

--------------------------------

### Use FontAwesomeProSharpDuotoneThin component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-sharp-duotone-thin/README.md

Import the FontAwesomeProSharpDuotoneThin component and render it with a name, color, and size. The name prop should be a valid icon name from the font.

```jsx
import { FontAwesomeProSharpDuotoneThin } from '@react-native-vector-icons/fontawesome-pro-sharp-duotone-thin';

// ...

<FontAwesomeProSharpDuotoneThin name="house" color="#ff0000" size={20} />
```

--------------------------------

### Run linting and tests

Source: https://github.com/oblador/react-native-vector-icons/blob/master/docs/CREATE_FONT_PACKAGE.md

Run linting and tests to verify your changes. Use 'pnpm run lint' and 'pnpm run test'.

```sh
pnpm run lint
pnpm run test
```

--------------------------------

### Fetch FontAwesome Pro fonts

Source: https://github.com/oblador/react-native-vector-icons/blob/master/apps/icon-explorer/README.md

Run this command to download FontAwesome Pro font files. Requires a FontAwesome npm token; if not configured, the script will prompt for it.

```sh
pnpm fetch-pro-fonts
```

--------------------------------

### Run linting

Source: https://github.com/oblador/react-native-vector-icons/blob/master/CONTRIBUTING.md

Verifies that your code passes all linting rules. Run this before submitting a pull request.

```sh
pnpm run lint
```

--------------------------------

### Legacy /build/ imports handled

Source: https://github.com/oblador/react-native-vector-icons/blob/master/MIGRATION.md

Legacy imports from '@expo/vector-icons/build/' are also rewritten.

```diff
-import Ionicons from '@expo/vector-icons/build/Ionicons';
+import Ionicons from "@react-native-vector-icons/ionicons";
```

--------------------------------

### Use FontAwesomeProLight component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-light/README.md

Import the FontAwesomeProLight component and render it with a name, color, and size.

```jsx
import { FontAwesomeProLight } from '@react-native-vector-icons/fontawesome-pro-light';

// ...

<FontAwesomeProLight name="house" color="#ff0000" size={20} />
```

--------------------------------

### FontAwesome5Pro basic usage

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome5-pro/README.md

Import FontAwesome5Pro from the package and render an icon with the name prop. Works like standard icons in the library.

```javascript
import { FontAwesome5Pro } from "@react-native-vector-icons/fontawesome5-pro";

const icon = <FontAwesome5Pro name="comments" />;
```

--------------------------------

### Import and use Foundation icon

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/foundation/README.md

Import the Foundation component from the static or dynamic module and render an icon with name, color, and size props.

```jsx
import { Foundation } from '@react-native-vector-icons/foundation/static';
// or with dynamic font loading (see the Expo setup guide for details)
import { Foundation } from '@react-native-vector-icons/foundation';

// ...

<Foundation name="house" color="#ff0000" size={20} />
```

--------------------------------

### Skip the static/dynamic prompt

Source: https://github.com/oblador/react-native-vector-icons/blob/master/MIGRATION.md

Pass --static or --dynamic to skip the prompt for development builds. --static uses /static imports (fonts shipped via native build), --dynamic uses default imports (fonts loaded at runtime).

```sh
npx @react-native-vector-icons/codemod --static
npx @react-native-vector-icons/codemod --dynamic
```

--------------------------------

### Basic usage with createIconSet

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/icomoon/README.md

Import the createIconSet function and a config JSON, then create an Icon component. The config.json should be placed in your project and the ttf file in rnvi-fonts/icomoon.

```js
import createIconSet from '@react-native-vector-icons/icomoon';
import icoMoonConfig from './IcoMoon-Free.json';
const Icon = createIconSet(icoMoonConfig);

const icon = <Icon name="comments" />;
```

--------------------------------

### Mock file for font assets

Source: https://github.com/oblador/react-native-vector-icons/blob/master/README.md

Create __mocks__/file-mock.js as an empty module to satisfy font imports in Jest.

```js
module.exports = {};
```

--------------------------------

### Type-checked icon names with TypeScript

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/icomoon/README.md

Pass a union of icon names as a generic parameter to get type-checking and autocomplete on the name prop. Invalid names will cause a type error.

```tsx
import createIconSet from '@react-native-vector-icons/icomoon';
import icoMoonConfig from './IcoMoon-Free.json';
const Icon = createIconSet<'home' | 'settings' | 'user'>(icoMoonConfig);

<Icon name="home" />     // ok
<Icon name="invalid" />  // type error
```

--------------------------------

### Basic usage with createIconSet

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontello/README.md

Create an icon component from a Fontello config.json and use it with a name prop.

```js
import createIconSet from '@react-native-vector-icons/fontello';
import fontelloConfig from './config.json';
const Icon = createIconSet(fontelloConfig);

const icon = <Icon name="comments" />;
```

--------------------------------

### Use Icon component with dynamic or static import

Source: https://github.com/oblador/react-native-vector-icons/blob/master/README.md

Import the icon component from the package or use the static version to embed the font at build time instead of loading at runtime. Then render the icon with name, size, and color props.

```js
import { FontAwesomeFreeSolid } from "@react-native-vector-icons/fontawesome-free-solid";
// or use the static version to embed the font at build time instead of loading it at runtime
import { FontAwesomeFreeSolid } from "@react-native-vector-icons/fontawesome-free-solid/static";

<FontAwesomeFreeSolid name="rocket" size={30} color="#900" />;
```

--------------------------------

### Use FontAwesomeProDuotoneLight component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-duotone-light/README.md

Import the FontAwesomeProDuotoneLight component and use it with name, color, and size props.

```jsx
import { FontAwesomeProDuotoneLight } from '@react-native-vector-icons/fontawesome-pro-duotone-light';

// ...

<FontAwesomeProDuotoneLight name="house" color="#ff0000" size={20} />
```

--------------------------------

### Import and use the icon component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/generator-react-native-vector-icons/src/app/templates/README.md

Import the icon component from the package and render it with name, color, and size props. If customSrc is not true and copyCustomFonts is false, an additional static import line is included.

```jsx
import { <%= className %> } from '@react-native-vector-icons/<%= packageName %>/static';
// or with dynamic font loading (see the Expo setup guide for details)
import { <%= className %> } from '@react-native-vector-icons/<%= packageName %>';

// ...

<<%= className %> name="house" color="#ff0000" size={20} />
```

--------------------------------

### Import and use Entypo icon component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/entypo/README.md

Import the Entypo component from the static or dynamic module and render an icon with name, color, and size props.

```jsx
import { Entypo } from '@react-native-vector-icons/entypo/static';
// or with dynamic font loading (see the Expo setup guide for details)
import { Entypo } from '@react-native-vector-icons/entypo';

// ...

<Entypo name="house" color="#ff0000" size={20} />
```

--------------------------------

### glyphmap: Generate icon mapping files

Source: https://github.com/oblador/react-native-vector-icons/blob/master/docs/CREATE_FONT_PACKAGE.md

Generates icon mapping files. 'mode' can be "css" or "codepoints". 'location' is a source file or an array of [source, output] pairs. 'prefix' is the CSS class prefix (css mode only). 'cleanup' removes source files after processing.

```json
{
  "glyphmap": {
    "mode": "css",
    "location": "FontAwesome.css",
    "prefix": ".fa-",
    "cleanup": true
  }
}
```

--------------------------------

### Run watch-deps to create the generator

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/generator-react-native-vector-icons/README.md

Run this command in the generator-react-native-vector-icons package to create the generator.

```bash
pnpm run watch-deps
```

--------------------------------

### Generate all fonts

Source: https://github.com/oblador/react-native-vector-icons/blob/master/CONTRIBUTING.md

Run this command from the repository root to generate all font packages using the yeoman generator.

```sh
pnpm generate
```

--------------------------------

### Use getImageSource with FontAwesome5 style argument

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome5/README.md

Shows how to call getImageSource with an extra style argument (e.g., 'solid') to generate an image. The promise resolves with the source object.

```javascript
import { FontAwesome5 } from "@react-native-vector-icons/fontawesome5";

FontAwesome5.getImageSource("solid", "comments", 30, "#000").then((source) =>
  this.setState({ image: source }),
);
```

--------------------------------

### Run the codemod

Source: https://github.com/oblador/react-native-vector-icons/blob/master/MIGRATION.md

Run the codemod in the current directory. It auto-detects the migration path based on your package.json dependencies. Ensure your code is committed to git before running.

```sh
npx @react-native-vector-icons/codemod
```

--------------------------------

### Generate a single font

Source: https://github.com/oblador/react-native-vector-icons/blob/master/CONTRIBUTING.md

Run this command from the repository root to generate a specific font package, e.g., ant-design.

```sh
pnpm generate ant-design
```

--------------------------------

### Mock for @react-native-vector-icons/common

Source: https://github.com/oblador/react-native-vector-icons/blob/master/README.md

Create __mocks__/@react-native-vector-icons/common.js to mock the entire common library and avoid native module loading errors.

```js
// Mock the entire common library so there are no native module loading errors
module.exports = {
  createIconSet: () => "icon",
};
```

--------------------------------

### Customize destination folder for fa-upgrade6

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome6-pro/README.md

Specify a custom destination folder for the Pro fonts. The `fontDir` in `package.json` can also be set.

```bash
npx fa-upgrade6 [destination]
```

--------------------------------

### Check Metro logs for new architecture confirmation

Source: https://github.com/oblador/react-native-vector-icons/blob/master/CONTRIBUTING.md

Look for this message in Metro logs to confirm the app is running with the new architecture. The presence of "fabric":true and "concurrentRoot":true indicates the new architecture is active.

```sh
Running "IconExplorer" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1}
```

--------------------------------

### Basic usage of FontAwesome6Pro

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome6-pro/README.md

Import the `FontAwesome6Pro` component and render an icon with the `name` prop. This uses the Regular font by default.

```javascript
import { FontAwesome6Pro } from "@react-native-vector-icons/fontawesome6-pro";

const icon = <FontAwesome6Pro name="comments" />;
```

--------------------------------

### Generate the font package

Source: https://github.com/oblador/react-native-vector-icons/blob/master/docs/CREATE_FONT_PACKAGE.md

Generates a single font package or all fonts. Use 'pnpm generate my-font' for a specific font, or 'pnpm generate' for all.

```sh
# Generate single font
pnpm generate my-font

# Or generate all fonts
pnpm generate
```

--------------------------------

### Expo config plugin configuration for static imports

Source: https://github.com/oblador/react-native-vector-icons/blob/master/docs/SETUP-EXPO.md

Add icon packages to the plugins array in app.json or app.config.js to register fonts with iOS via UIAppFonts. Then run npx expo prebuild to regenerate the native project.

```json
{
  "expo": {
    "plugins": [
      "@react-native-vector-icons/material-icons",
      "@react-native-vector-icons/ionicons"
    ]
  }
}
```

--------------------------------

### Use getImageSource with FontAwesome6

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome6/README.md

Shows how to use getImageSource with an extra style argument. The style is required and selects which font file to use.

```javascript
import { FontAwesome6 } from "@react-native-vector-icons/fontawesome6";

FontAwesome6.getImageSource("solid", "comments", 30, "#000").then((source) =>
  this.setState({ image: source }),
);
```

--------------------------------

### Inject icon font styles in JavaScript entry point

Source: https://github.com/oblador/react-native-vector-icons/blob/master/docs/SETUP-WEB.md

In your JavaScript entry point, import the icon component and font file, generate the @font-face CSS, and inject it into the document head. This makes the FontAwesome font available to your web app.

```javascript
import Icon from '@react-native-vector-icons/fontAwesome';

// Generate the required CSS
import iconFont from '@react-native-vector-icons/fontawesome/fonts/FontAwesome.ttf';
const iconFontStyles = `@font-face {
  src: url(${iconFont});
  font-family: FontAwesome;
}`;

// Create a stylesheet
const style = document.createElement('style');
style.type = 'text/css';

// Append the iconFontStyles to the stylesheet
if (style.styleSheet) {
  style.styleSheet.cssText = iconFontStyles;
} else {
  style.appendChild(document.createTextNode(iconFontStyles));
}

// Inject the stylesheet into the document head
document.head.appendChild(style);
```

--------------------------------

### Run generator manually with npx yo

Source: https://github.com/oblador/react-native-vector-icons/blob/master/docs/CREATE_FONT_PACKAGE.md

Run this command from the packages/my-font directory to manually generate the font package. The --current-version flag sets the version to 1.0.0. Note that the pnpm generate command is preferred as it handles version management automatically.

```sh
cd packages/my-font
npx yo react-native-vector-icons --current-version=1.0.0
```

--------------------------------

### Run watch-tsc to build the generator

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/generator-react-native-vector-icons/README.md

Run this command in the generator-react-native-vector-icons package to trigger a build that creates the generator.

```bash
pnpm run watch-tsc
```

--------------------------------

### Use FontAwesomeProSharpDuotoneRegular component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-sharp-duotone-regular/README.md

Import the FontAwesomeProSharpDuotoneRegular component and use it with the name, color, and size props.

```jsx
import { FontAwesomeProSharpDuotoneRegular } from '@react-native-vector-icons/fontawesome-pro-sharp-duotone-regular';

// ...

<FontAwesomeProSharpDuotoneRegular name="house" color="#ff0000" size={20} />
```

--------------------------------

### Use FontAwesomeProDuotoneRegular component

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome-pro-duotone-regular/README.md

Import the FontAwesomeProDuotoneRegular component and render an icon with name, color, and size props.

```jsx
import { FontAwesomeProDuotoneRegular } from '@react-native-vector-icons/fontawesome-pro-duotone-regular';

// ...

<FontAwesomeProDuotoneRegular name="house" color="#ff0000" size={20} />
```

--------------------------------

### Import transforms: from react-native-vector-icons to scoped packages

Source: https://github.com/oblador/react-native-vector-icons/blob/master/MIGRATION.md

Rewrites old single-library-style imports to scoped package imports with /static. The diff shows the before and after for Ionicons, FontAwesome, and MaterialCommunityIcons.

```diff
-import Ionicons from 'react-native-vector-icons/Ionicons';
+import Ionicons from "@react-native-vector-icons/ionicons/static";

-import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import FontAwesome from "@react-native-vector-icons/fontawesome/static";

-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from "@react-native-vector-icons/material-design-icons/static";
```

--------------------------------

### SVG to Font Generation (Feather Icons)

Source: https://github.com/oblador/react-native-vector-icons/blob/master/docs/CREATE_FONT_PACKAGE.md

Configuration for generating a font package from Feather Icons SVG files. Uses the fontCustom build step to process SVG icons and the glyphmap step to generate a CSS-based glyph map.

```json
{
  "generator-react-native-vector-icons": {
    "packageName": "feather",
    "upstreamFont": "feather-icons",
    "buildSteps": {
      "fontCustom": {
        "location": "node_modules/feather-icons/dist/icons"
      },
      "glyphmap": {
        "mode": "css",
        "cleanup": true
      }
    },
    "versions": [{ "rnvi": "12.0.0", "upstream": "4.29.2" }]
  }
}
```

--------------------------------

### Codepoints-based Font (Material Icons)

Source: https://github.com/oblador/react-native-vector-icons/blob/master/docs/CREATE_FONT_PACKAGE.md

Configuration for generating a font package from Material Icons codepoints file. Includes a preScript to download the codepoints and TTF files, and a glyphmap step using codepoints mode.

```json
{
  "generator-react-native-vector-icons": {
    "packageName": "material-icons",
    "postScriptName": "MaterialIcons-Regular",
    "buildSteps": {
      "preScript": {
        "script": "mkdir -p fonts\nREF='f7bd4f25f3764883717c09a1fd867f560c9a9581'\ncurl https://raw.githubusercontent.com/google/material-design-icons/$REF/font/MaterialIcons-Regular.codepoints -Ls > MaterialIcons-Regular.codepoints\ncurl https://raw.githubusercontent.com/google/material-design-icons/$REF/font/MaterialIcons-Regular.ttf -Ls > fonts/MaterialIcons.ttf"
      },
      "glyphmap": {
        "location": "MaterialIcons-Regular.codepoints",
        "mode": "codepoints",
        "prefix": ".mdi-",
        "cleanup": true
      }
    },
    "versions": [{ "rnvi": "12.0.0", "upstream": "0.0.1" }]
  }
}
```

--------------------------------

### Clean all build folders

Source: https://github.com/oblador/react-native-vector-icons/blob/master/CONTRIBUTING.md

Removes all build folders to avoid issues when switching between old and new architecture builds.

```sh
pnpm run clean
```

--------------------------------

### preScript: Execute shell commands before font generation

Source: https://github.com/oblador/react-native-vector-icons/blob/master/docs/CREATE_FONT_PACKAGE.md

Defines a shell script to run before font generation. The script is executed as-is; here it creates a fonts directory and downloads a font file.

```json
{
  "preScript": {
    "script": "mkdir -p fonts\ncurl https://example.com/font.ttf > fonts/font.ttf"
  }
}
```

--------------------------------

### Using iconStyle prop with FontAwesome6Pro

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome6-pro/README.md

Pass the `iconStyle` prop to change the font style. Valid types include 'solid', 'brand', 'light', 'thin', 'duotone', 'sharpSolid', 'sharpThin', 'sharpLight', and 'sharp'.

```javascript
import { FontAwesome6Pro } from "@react-native-vector-icons/fontawesome6-pro";

const icon = <FontAwesome6Pro name="comments" iconStyle="solid" />;
const icon = <FontAwesome6Pro name="git" iconStyle="brand" />;
```

--------------------------------

### Use iconStyle prop to change FontAwesome5 icon style

Source: https://github.com/oblador/react-native-vector-icons/blob/master/packages/fontawesome5/README.md

Demonstrates passing the iconStyle prop to select between solid and brand fonts. Valid types are regular (default), brand, and solid.

```javascript
import { FontAwesome5 } from "@react-native-vector-icons/fontawesome5";

const icon = <FontAwesome5 name="comments" iconStyle="solid" />;
const icon = <FontAwesome5 name="git" iconStyle="brand" />;
```
Tokens:
Raw