## File: README.md [](https://npmjs.com/package/@react-native-vector-icons/common) [](https://npmjs.com/package/@react-native-vector-icons/common) # React Native Vector Icons Elevate your React Native applications with the power of customizable vector icons. Ideal for embellishing buttons, logos, and navigation or tab bars, these icons seamlessly integrate into your projects. Their versatility makes extension and styling effortless. For the integration of `.svg` files natively, you can explore [`react-native-vector-image`](https://github.com/oblador/react-native-vector-image). > [!TIP] > If you are still using the old single package `react-native-vector-icons` visit . To migrate to the package-per-icon-set approach, see [MIGRATION.md](MIGRATION.md). ## Table of Contents - [Sponsorship](#sponsorship) - [Available Icon Sets](#available-icon-sets) - [Installation](#installation) - [Setup](#setup) - [Icon Component](#icon-component) - [Usage as PNG Image/Source Object](#usage-as-png-imagesource-object) - [Multi-Style Fonts](#multi-style-fonts) - [Custom Fonts](#custom-fonts) - [Animation](#animation) - [Dynamic icon font loading](#dynamic-icon-font-loading) - [Usage Examples](#usage-examples) - [Changelog](https://github.com/oblador/react-native-vector-icons/releases) - [License](#license) ## Sponsorship Should you find this library beneficial, kindly contemplate the option of [sponsoring](https://github.com/sponsors/oblador). ## Available Icon Sets [Explore all icons](https://oblador.github.io/react-native-vector-icons/). RNVI comes with the following supported icons. You can [search NPM](https://www.npmjs.com/search?q=keywords%3Areact-native-vector-icons-icon) for third party icons. ### Actively maintained - [`AntDesign`](https://ant.design/components/icon) from Ant Group (v4.4.2 with _449_ icons) - [`Feather`](http://feathericons.com) created by Cole Bemis & Contributors (v4.29.2 featuring _287_ icons) - [`FontAwesome`](https://fontawesome.com/search) designed by Fonticons, Inc. (v7.2.0 featuring _2,806_ free and _75,767_ pro icons) - [`Foundation`](http://zurb.com/playground/foundation-icon-fonts-3) by ZURB, Inc. (v3.0 with _283_ icons) - [`Ionicons`](https://ionic.io/ionicons) crafted by Ionic (v8.0.9 containing _1,357_ icons) - [`MaterialDesignIcons`](https://pictogrammers.com/library/mdi/) from MaterialDesignIcons.com (v7.4.47 including _7448_ icons) - [`Octicons`](https://primer.style/foundations/icons) designed by GitHub, Inc. (v19.23.1 with _370_ icons) - [`Lucide`](https://lucide.dev/) designed by Lucide, (v1.7.0 with _1,941_ icons) ### No longer maintained upstream - [`Entypo`](http://entypo.com) by Daniel Bruce (v1.0.1 with _411_ icons) - [`EvilIcons`](http://evil-icons.io) designed by Alexander Madyankin & Roman Shamin (v1.10.1 with _70_ icons) - [`FontAwesome 4`](https://fontawesome.com/v4/icons) by Fonticons, Inc. (v4.7.0 containing _785_ icons) - [`FontAwesome 5`](https://fontawesome.com/v5/search) from Fonticons, Inc. (v5.15.4 offering _1611_ free and _7869_ pro icons) - [`FontAwesome 6`](https://fontawesome.com/search) designed by Fonticons, Inc. (v6.7.2 featuring _2060_ free and _52663_ pro icons) - [`Fontisto`](https://github.com/kenangundogan/fontisto) created by Kenan Gündoğan (v3.0.4 featuring _617_ icons) - [`MaterialIcons`](https://fonts.google.com/icons?icon.set=Material+Icons) by Google, Inc. (v4.0.0 featuring _2234_ icons) - [`SimpleLineIcons`](https://simplelineicons.github.io/) crafted by Sabbir & Contributors (v2.5.5 with _189_ icons) - [`Zocial`](https://smcllns.github.io/css-social-buttons) by Sam Collins (v1.1.1 with _100_ icons) ## Migration See [MIGRATION.md](MIGRATION.md) if you are migrating from `react-native-vector-icons` to the package-per-icon-set approach or between major versions. ## Installation 1. Install the packages for the icons you want to use ```sh npm install @react-native-vector-icons/fontawesome-free-solid @react-native-vector-icons/evil-icons ``` 2. Depending on the platform you're targeting (iOS/Android/Windows), follow the appropriate setup instructions below. 3. If you are using one of the following fonts, refer to their guides for further instructions - [Fontello](packages/fontello/README.md) - [Icomoon](packages/icomoon/README.md) ## Setup Refer to the guide for [Expo](./docs/SETUP-EXPO.md), [React Native](./docs/SETUP-REACT-NATIVE.md) or [Web](./docs/SETUP-WEB.md) for further instructions. ### Font location customisation For fonts like the FontAwesome Pro as well as Fontello and Icomoon where you provide the fonts, the default location for the font files is `rnvi-fonts` in the same directory as your package.json. This can be customized by setting the `fontDir` property in your `package.json` file. ```json { "reactNativeVectorIcons": { "fontDir": "src/rnvi-fonts" } } ``` ## `Icon` Component You can either use one of the bundled icons above or roll your own custom font. ```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"; ; ``` ### Props Any [Text props](https://reactnative.dev/docs/text.html#props) and the following: | Prop | Description | Default | | ----------- | ----------------------------------------------------------------------- | ----------- | | **`size`** | Size of the icon, can also be passed as `fontSize` in the style object. | `12` | | **`name`** | What icon to show, see Icon Explorer app or one of the links above. | _None_ | | **`color`** | Color of the icon. | _Inherited_ | ### Styling Since `Icon` builds on top of the `Text` component, most [style properties](https://reactnative.dev/docs/style.html) will work as expected, you might find it useful to play around with these: - `backgroundColor` - `borderWidth` - `borderColor` - `borderRadius` - `padding` - `margin` - `color` - `fontSize` By combining some of these you can create for example : ## Usage as PNG Image/Source Object Convenient way to plug this in into other components that rely on bitmap images rather than scalable vector icons. You need to use Expo (with `expo-font` installed) _or_ install `@react-native-vector-icons/get-image` to use this feature. Both methods return an `ImageResult` object (`{ uri, width, height, scale }`) that can be passed directly as an `Image` source. ```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 ; ``` Alternatively you may use the async method `Icon.getImageSource`. ```jsx const source = await Icon.getImageSource('user', 20, 'red'); // or with an options object: const source = await Icon.getImageSource('user', { size: 20, color: 'red' }); ``` Keep in mind that `Icon.getImageSourceSync` is blocking and might incur performance penalties. Subsequent calls will use cache, however. ### Static methods All static methods from `Icon` are supported by multi-styled fonts. | Method | Description | | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **`getImageSource`** | Returns a promise resolving to an `ImageResult` of a bitmap version of the icon. Usage: `const source = await Icon.getImageSource(name, { size, color, lineHeight })` | | **`getImageSourceSync`** | Same as `getImageSource` but synchronous. Usage: `const source = Icon.getImageSourceSync(name, { size, color, lineHeight })` | ## Custom Fonts The best approach is to use our icon generator to create your own icon package. See [CREATE_FONT_PACKAGE.md](./docs/CREATE_FONT_PACKAGE.md) to learn how to create your own font packages. You can also use `createIconSet()` directly in your project. This returns your own custom font based on the `glyphMap` where the key is the icon name and the value is either a UTF-8 character or its character code. `postScriptName` is the name of the postscript font. Open the font in , Font Book.app or similar to learn the name. Also pass the `fontFileName` argument for Android support. ```js import { createIconSet } from "@react-native-vector-icons/common"; const glyphMap = { "icon-name": 1234, test: "∆" }; // use createIconSet() with object parameter // or use positional parameters for compatibility with version <= 10: `createIconSet(glyphMap, fontFamily[, fontFile])` const Icon = createIconSet(glyphMap, { postScriptName: "FontName", fontFileName: "font-name.ttf", fontSource: require("../fonts/font-name.ttf"), // optional, for dynamic loading. Can also be a local file uri. }); ``` If you aren't using dynamic font loading you need to make sure your font is copied into your bundle. ## Animation React Native comes with an amazing animation library called [`Animated`](https://reactnative.dev/docs/animated.html). To use it with an icon, simply create an animated component with this line: `const AnimatedIcon = Animated.createAnimatedComponent(Icon)`. You can also use the higher level animation library [react-native-animatable](https://github.com/oblador/react-native-animatable). ## Dynamic icon font loading TL;DR we recommend you use the `/static` import if you use [Development builds](https://docs.expo.dev/develop/development-builds/introduction/) and the root import when using [Expo Go](https://docs.expo.dev/develop/development-builds/introduction/#difference-between-expo-go-and-development-builds). Icon fonts can be made available statically at build time or loaded dynamically at runtime. The root (non-`/static`) import uses dynamic loading. If you don't need dynamic loading, use the `/static` imports (e.g. `"@react-native-vector-icons/ionicons/static"`). See the [Expo setup guide](./docs/SETUP-EXPO.md) for more details, config plugins, and the dynamic loading API. ## Usage Examples ### Icon Explorer Try the `IconExplorer` project in `Examples/IconExplorer` folder, there you can also search for any icon. ### Basic Example ```js import { IonIcons } from "@react-native-vector-icons/ionicons/static"; const ExampleView = () => ( ); ``` ### Inline Icons ```js import { Text } from "react-native"; import { IonIcons } from "@react-native-vector-icons/ionicons/static"; const ExampleView = (props) => ( Lorem Ipsum ); ``` ## Testing When running tests with `jest` you will need to mock out the native code loading to prevent errors. In `jest.config.js` add ```js // Mock out font loading moduleNameMapper: { '\\.(ttf)$': '/__mocks__/file-mock.js', } ``` Create `__mocks__/file-mock.js`: ```js module.exports = {}; ``` Create `__mocks__/@react-native-vector-icons/common.js`: ```js // Mock the entire common library so there are no native module loading errors module.exports = { createIconSet: () => "icon", }; ``` ## [Changelog](https://github.com/oblador/react-native-vector-icons/releases) ## License This project is licenced under the [MIT License](http://opensource.org/licenses/mit-license.html). Any bundled fonts are copyright to their respective authors and mostly under MIT or [SIL OFL](http://scripts.sil.org/OFL). --- ## File: docs/CREATE_FONT_PACKAGE.md # Creating a font package You can create a new font package either via a PR to this repository or by publishing your own font package on NPM. We use a yeoman generator to fully automate the generation the fonts from a configuration file. In the future the idea is to automate this to automatically release new fonts in line with upstream. Below we describe how to create a font in this monorepo, the process for creating your own package would be quite similar. > **Note**: Before contributing a new font package, please read our [Contributing Guidelines](../CONTRIBUTING.md) and follow the [development workflow](../CONTRIBUTING.md#development-workflow) described there. ## Quick Start 1. **Set up development environment** (see [CONTRIBUTING.md](../CONTRIBUTING.md#development-workflow)): ```sh pnpm install ``` 2. **Create font package directory and config**: ```sh mkdir packages/my-font vi packages/my-font/.yo-rc.json git add packages/my-font/.yo-rc.json ``` 3. **Generate the font package**: ```sh # Generate single font pnpm generate my-font # Or generate all fonts pnpm generate ``` ## Configuration Reference The `.yo-rc.json` file contains all configuration for the font package generation. Here's the complete structure: For most fonts you should be able to set the packageName and most other variaables will be derived from them, but you can adjust with the optional propertires when necessary. ### Required Properties #### packageName - **Type**: `string` - **Description**: The name of the node package and directory name - **Example**: `"material-symbols"` - **Note**: Currently assumes package will live in `@react-native-vector-icons` namespace ### Optional Properties #### name - **Type**: `string` - **Description**: The name in capitalised sentence from - **Default**: Title Case of packageName - **Example**: `"Material Symbols"` (from `material-symbols`) #### className - **Type**: `string` - **Description**: Class name for generated components - **Default**: PascalCase of packageName - **Example**: `"MaterialSymbols"` (from `material-symbols`) #### postScriptName - **Type**: `string` - **Description**: PostScript name for the font - **Default**: Same as className - **Example**: `"MaterialSymbols"` #### fontFileName - **Type**: `string` - **Description**: Base filename for generated fonts - **Default**: Same as className - **Example**: `"MaterialSymbols"` #### upstreamFont - **Type**: `string | object` - **Description**: The upstream font package dependency where the font comes from a node module - **String format**: `"package-name"` - fetches latest version from npm - **Object format**: ```json { "packageName": "@fortawesome/fontawesome-free", "versionRange": "^6", "registry": "https://registry.npmjs.org", "versionOnly": false } ``` #### customSrc - **Type**: `string | boolean` - **Description**: Path to custom source template or `true` to skip generation - **Example**: `"../../../../fontawesome-common/generators/app/templates/src/index.tsx"` #### customReadme - **Type**: `boolean` - **Description**: Skip README.md generation - **Default**: `false` #### copyCustomFonts - **Type**: `boolean` - **Description**: Copy custom font files instead of generating - **Default**: `false` #### commonPackage - **Type**: `string` - **Description**: Path to common package for shared functionality - **Default**: `"common"` - **Example**: `"fontawesome-common/fontawesome6"` #### meta - **Type**: `object` - **Description**: Metadata for multi-style fonts - **Example**: ```json { "defaultStyleName": "regular", "styleNames": ["regular", "solid", "brand"], "styles": { "regular": { "family": "FontAwesome6Free-Regular", "name": "FontAwesome6_Regular.ttf", "weight": 400 } } } ``` #### versions - **Type**: `array` - **Description**: Version history tracking. Updated when a new upstream font version is released. - **Example**: ```json [ { "rnvi": "12.0.0", "upstream": "4.29.2" }, { "rnvi": "12.0.1", "upstream": "4.30.0" } ] ``` ### Build Steps The `buildSteps` object defines the font generation pipeline. Steps are executed in this order: #### preScript Execute shell commands before font generation ```json { "preScript": { "script": "mkdir -p fonts\ncurl https://example.com/font.ttf > fonts/font.ttf" } } ``` #### renameSVGs Rename and filter SVG files ```json { "renameSVGs": { "location": "../../node_modules/@primer/octicons/build/svg", "keepPostfix": "-16" } } ``` - **location**: Source directory containing SVGs - **keepPostfix**: Only keep files ending with this postfix, remove it from output #### fixSVGPaths Fix SVG path issues using oslllo-svg-fixer ```json { "fixSVGPaths": { "location": "../../node_modules/ionicons/dist/svg", "cleanup": true } } ``` - **location**: Source directory or `"renamedSVGs"` if after renameSVGs - **cleanup**: Remove source directory after processing #### fontCustom Generate font TTF from SVGs using FontCustom ```json { "fontCustom": { "location": "fixedSvg", "cleanup": true } } ``` - **location**: Directory containing SVG files - **cleanup**: Remove source directory after processing #### fontforgeScript Run FontForge script for font post-processing ```json { "fontforgeScript": { "script": "correct-direction.py" } } ``` - **script**: Script name in the generator's fontforge directory #### glyphmap Generate icon mapping files ```json { "glyphmap": { "mode": "css", "location": "FontAwesome.css", "prefix": ".fa-", "cleanup": true } } ``` - **mode**: `"css"` or `"codepoints"` - **location**: Source file or array of `[source, output]` pairs - **prefix**: CSS class prefix (css mode only) - **cleanup**: Remove source files after processing #### copyFont Copy existing font files ```json { "copyFont": { "location": "../../node_modules/font-awesome/fonts/fontawesome-webfont.ttf" } } ``` - **location**: Source file path or array of `[source, output]` pairs #### postScript Execute shell commands after font generation ```json { "postScript": { "script": "node ../scripts/generate-metadata.js" } } ``` ## Configuration Examples ### SVG to Font Generation (Feather Icons) ```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" }] } } ``` ### CSS-based Font (FontAwesome) ```json { "generator-react-native-vector-icons": { "packageName": "fontawesome", "postScriptName": "FontAwesome", "fontFileName": "FontAwesome", "className": "FontAwesome", "upstreamFont": "font-awesome", "buildSteps": { "glyphmap": { "location": "../../node_modules/font-awesome/css/font-awesome.css", "mode": "css", "prefix": ".fa-" }, "copyFont": { "location": "../../node_modules/font-awesome/fonts/fontawesome-webfont.ttf" } }, "versions": [{ "rnvi": "12.0.0", "upstream": "4.7.0" }] } } ``` ### Codepoints-based Font (Material Icons) ```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" }] } } ``` ### Multi-style Font (FontAwesome 6) ``` /* Detailed source-code truncated for AI context efficiency. */ ``` ### SVG Processing with Fixes (Ionicons) ```json { "generator-react-native-vector-icons": { "packageName": "ionicons", "upstreamFont": "ionicons", "buildSteps": { "fixSVGPaths": { "location": "../../node_modules/ionicons/dist/svg" }, "fontCustom": { "location": "fixedSvg", "cleanup": true }, "fontforgeScript": { "script": "correct-direction.py" }, "glyphmap": { "mode": "css", "cleanup": true } }, "versions": [{ "rnvi": "12.0.0", "upstream": "7.4.0" }, { "rnvi": "12.0.1", "upstream": "8.0.8" }] } } ``` ### Custom Font Package (Fontello) ```json { "generator-react-native-vector-icons": { "packageName": "fontello", "customReadme": true, "customSrc": true, "copyCustomFonts": true } } ``` ## Build Process 1. **Install Dependencies**: The generator installs upstream font packages 2. **Template Generation**: Creates package.json, TypeScript files, Android/iOS config 3. **Build Steps Execution**: Runs configured build steps in order 4. **Font Generation**: Uses FontCustom in Docker container if needed 5. **Glyph Mapping**: Generates JSON mapping files for icons ## Testing Your Font Package After generating your font package, test it in the example app: ```sh # Start the example app (see CONTRIBUTING.md for details) pnpm run example start pnpm run example android # or ios ``` ## Development Workflow For ongoing development and testing: 1. **Make template changes** to `packages/generator-react-native-vector-icons/src/app/templates/` 2. **Regenerate fonts**: ```sh pnpm generate my-font ``` 3. **Test changes** in the IconExplorer app 4. **Run linting and tests** (see [CONTRIBUTING.md](../CONTRIBUTING.md#linting-and-tests)): ```sh pnpm run lint pnpm run test ``` ## Submitting Your Font Package When ready to contribute your font package: 1. **Follow commit conventions** described in [CONTRIBUTING.md](../CONTRIBUTING.md#commit-message-convention) 2. **Create a pull request** following the [PR guidelines](../CONTRIBUTING.md#sending-a-pull-request) 3. **Include documentation** updates if needed 4. **Ensure all tests pass** in CI ## Font Versioning Font package versions are independent of upstream font versions. We track the mapping in each font's README.md file as described in [CONTRIBUTING.md](../CONTRIBUTING.md#font-versioning). ## Manual Generator Execution If needed, you can run the generator manually: ```sh cd packages/my-font npx yo react-native-vector-icons --current-version=1.0.0 ``` > **Note**: The `pnpm generate` command is the preferred method as it handles version management automatically. --- ## File: docs/SETUP-EXPO.md # Setup guide for Expo Apps > If you use React Native without Expo, please follow [this guide](./SETUP-REACT-NATIVE.md) instead. This guide applies to Expo apps only. > [!NOTE] > TL;DR: The default import bundles the `.ttf` into your JS bundle and registers it at runtime — works everywhere, including Expo Go. In a development build, the same `.ttf` is also copied into the native binary by autolinking, so it ends up shipping twice. The `/static` import is an optimization that skips the JS-bundle copy. ## Dynamic import (default) ```js import { MaterialIcons } from "@react-native-vector-icons/material-icons"; ``` The default entry imports the `.ttf`, so Metro bundles it as a JS asset. When the icon first renders, `expo-font` registers it with the native text system at runtime. No native configuration or config plugin needed — this is the only option that works with Expo Go, and it lets the font be updated via OTA. ## Static import (optimization for [Development Builds](https://docs.expo.dev/develop/development-builds/introduction/)) ```js import { MaterialIcons } from "@react-native-vector-icons/material-icons/static"; ``` In a development build, autolinking picks up each package's `build.gradle` / `.podspec` and copies the `.ttf` into the native binary at build time. Using the dynamic import on top of that means the same font also ships as a JS asset — so it's bundled twice. The `/static` entry skips the `.ttf` import on the JS side, so Metro doesn't bundle it. The font reaches the device through the native build only, and the package's Expo config plugin registers it with iOS by adding it to `UIAppFonts` in `Info.plist`. To do that, add the icon packages you use to the `plugins` array in your `app.json` or `app.config.js`. For example: ```json { "expo": { "plugins": [ "@react-native-vector-icons/material-icons", "@react-native-vector-icons/ionicons" ] } } ``` Then run `npx expo prebuild` to regenerate the native project. Because this approach relies on the native build, it does not work with Expo Go, and the embedded font cannot be swapped via OTA updates. > [!TIP] > If you want to keep the dynamic import in a development build but avoid the `.ttf` duplication, you can [exclude the package from autolinking](https://docs.expo.dev/modules/autolinking/#exclude) instead. That skips the `build.gradle` / `.podspec` so only the JS-bundled copy ships. > [!WARNING] > Avoid manual font config duplication: do not add fonts from `node_modules/@react-native-vector-icons/some-font` to `expo-font` config plugin configuration. ## About dynamic loading Dynamic loading is the runtime mechanism behind the default (dynamic) import — `expo-font` registers the JS-bundled `.ttf` with the native text system the first time an icon renders, so no native build step or config plugin is needed. Dynamic loading is supported on Expo SDK >= 52. Dynamic loading is currently limited to fonts shipped within the provided packages — it doesn't work out of the box with Pro fonts (such as FontAwesome Pro). To dynamically load custom fonts, use `createIconSet` with a `fontSource` as described in [Custom Fonts](../README.md#custom-fonts). ### Controlling dynamic loading `@react-native-vector-icons/common` exports the following functions: - `isDynamicLoadingEnabled`: Returns whether dynamic loading is enabled. - `isDynamicLoadingSupported`: Returns whether dynamic loading is supported by your runtime (checks that necessary Expo features are present). - `setDynamicLoadingEnabled`: Enables or disables dynamic loading. - `setDynamicLoadingErrorCallback`: Sets a callback that is called when an error occurs during dynamic loading (e.g. a misconfigured OTA update missing a font file). --- ## File: docs/SETUP-REACT-NATIVE.md # Setup guide for React Native Apps > If you use Expo, please follow [this guide](./SETUP-EXPO.md) instead. This guide applies to vanilla React Native apps only. ### Android 1. Rebuild your app. No extra steps needed for Android. ### iOS > [!TIP] > You will need to follow these instructions any time you add a new font 1. To use the icon packages you previously installed on iOS, run: ```sh npx rnvi-update-plist package.json ios/AppName/Info.plist ``` 2. Open `ios/Info.plist` and verify that the property called **Fonts provided by application** (or **UIAppFonts** if opening the file in a text editor) is present and contains the expected entries. For example: List of all available fonts that could be present in Info.plist ```xml UIAppFonts FontAwesome6_Brands.ttf FontAwesome6_Regular.ttf FontAwesome6_Solid.ttf Octicons.ttf ``` 3. Run `pod install` in the ios directory ```sh cd ios && pod install ``` 4. Rebuild your app ### macOS This needs more work, see details in [#1624](https://github.com/oblador/react-native-vector-icons/issues/1624) ### Windows 1. Copy the needed fonts from `node_modules/react-native-vector-icons/Fonts/*` to `windows//Assets/*` 2. Open your solution on Visual Studio, right click on Assets, add Add Assets, then select your fonts, save and quit Visual Studio. 3. Rebuild your project --- ## File: docs/SETUP-WEB.md # Setup guide for Web Apps > This guide can probably be improved, please feel free to contribute. ### React-native-web Setup To port a react-native mobile app to web using `react-native-web` you just need to ensure the fonts are known on the web-app side. You will need add the font-family for each font you use to your css. You can debug missing font-families by looking in the Developer console in your web browser when debugging your web app. NOTE: if you're using webpack or similar you *may* need to configure webpack to handle loading of ttf fonts, using url-loader or file-loader. See [Web Setup](#web-setup) for more details. In your `App.css` or similar add the font-family specifications: ```css @font-face { src: url(path/to/fonts/Ionicons.ttf); font-family: "Ionicons"; } @font-face { src: url(path/to/fonts/FontAwesome.ttf); font-family: "FontAwesome"; } @font-face { src: url(path/to/fonts/FontAwesome5_Brands.ttf); font-family: "FontAwesome5_Brands"; font-weight: 400; /* Regular weight */ font-style: normal; } @font-face { src: url(path/to/fonts/FontAwesome5_Regular.ttf); font-family: "FontAwesome5_Regular"; font-weight: 400; /* Regular weight */ font-style: normal; } @font-face { src: url(path/to/fonts/FontAwesome5_Solid.ttf); font-family: "FontAwesome5_Solid"; font-weight: 900; /* Bold weight for solid */ font-style: normal; } @font-face { src: url(path/to/fonts/MaterialIcons.ttf); font-family: "MaterialIcons"; } @font-face { src: url(path/to/fonts/Feather.ttf); font-family: "Feather"; } @font-face { src: url(path/to/fonts/MaterialCommunityIcons.ttf); font-family: "MaterialCommunityIcons"; } /* TODO: Add other icons fonts here */ ``` ### Web Setup To integrate the library with your web project using [webpack](https://webpack.js.org/), follow these steps: 1. In your webpack configuration file, add a section to handle TTF files using `url-loader` or `file-loader`: ```js { test: /\.ttf$/, loader: "url-loader", // or directly file-loader include: path.resolve(__dirname, "node_modules/react-native-vector-icons"), } ``` 2. In your JavaScript entry point, consume the font files and inject the necessary style tag: ```js 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); ``` By following these steps, you will seamlessly integrate the vector icons library into your web project using [webpack](https://webpack.js.org/), enabling you to effortlessly use the icons within your web application. --- ## File: packages/zocial/README.md # React Native Vector Icons - Zocial Zocial font for React Native Vector Icons See the [React Native Vector Icons README](../../README.md) for more details. ## Installation ```sh npm install @react-native-vector-icons/zocial ``` ## Usage ```jsx import { Zocial } from '@react-native-vector-icons/zocial/static'; // or with dynamic font loading (see the Expo setup guide for details) import { Zocial } from '@react-native-vector-icons/zocial'; // ... ``` ### Expo Config Plugin This package ships an [Expo config plugin](../../docs/SETUP-EXPO.md). Add it to the `plugins` array in your `app.json` or `app.config.js` if you use static imports: ```json { "expo": { "plugins": ["@react-native-vector-icons/zocial"] } } ``` ## Versions Prior to version 12, the version of this font package tracked the upstream version. The table below tracks which font version is included in each package version. | RNVI version | Upstream version | | ------------ | ---------------- | | > 12.0.0 | 1.1.1 | ## Contributing See the [contributing guide](../../CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. ## License MIT --- ## File: packages/simple-line-icons/README.md # React Native Vector Icons - Simple Line Icons Simple Line Icons font for React Native Vector Icons See the [React Native Vector Icons README](../../README.md) for more details. ## Installation ```sh npm install @react-native-vector-icons/simple-line-icons ``` ## Usage ```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'; // ... ``` ### Expo Config Plugin This package ships an [Expo config plugin](../../docs/SETUP-EXPO.md). Add it to the `plugins` array in your `app.json` or `app.config.js` if you use static imports: ```json { "expo": { "plugins": ["@react-native-vector-icons/simple-line-icons"] } } ``` ## Versions Prior to version 12, the version of this font package tracked the upstream version. The table below tracks which font version is included in each package version. | RNVI version | Upstream version | | ------------ | ---------------- | | > 12.0.0 | 2.5.5 | ## Contributing See the [contributing guide](../../CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. ## License MIT --- ## File: packages/octicons/README.md # React Native Vector Icons - Octicons Octicons font for React Native Vector Icons See the [React Native Vector Icons README](../../README.md) for more details. ## Installation ```sh npm install @react-native-vector-icons/octicons ``` ## Usage ```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'; // ... ``` ### Expo Config Plugin This package ships an [Expo config plugin](../../docs/SETUP-EXPO.md). Add it to the `plugins` array in your `app.json` or `app.config.js` if you use static imports: ```json { "expo": { "plugins": ["@react-native-vector-icons/octicons"] } } ``` ## Versions Prior to version 12, the version of this font package tracked the upstream version. The table below tracks which font version is included in each package version. | RNVI version | Upstream version | | ------------ | ---------------- | | > 12.0.0 | 19.15.0 | | > 12.0.1 | 19.15.3 | | > 20.4.1 | 19.22.0 | | > 21.0.0 | 19.23.1 | ## Contributing See the [contributing guide](../../CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. ## License MIT --- ## File: packages/material-icons/README.md # React Native Vector Icons - Material Icons Material Icons font for React Native Vector Icons See the [React Native Vector Icons README](../../README.md) for more details. ## Installation ```sh npm install @react-native-vector-icons/material-icons ``` ## Usage ```jsx import { MaterialIcons } from '@react-native-vector-icons/material-icons/static'; // or with dynamic font loading (see the Expo setup guide for details) import { MaterialIcons } from '@react-native-vector-icons/material-icons'; // ... ``` ### Expo Config Plugin This package ships an [Expo config plugin](../../docs/SETUP-EXPO.md). Add it to the `plugins` array in your `app.json` or `app.config.js` if you use static imports: ```json { "expo": { "plugins": ["@react-native-vector-icons/material-icons"] } } ``` ## Versions Prior to version 12, the version of this font package tracked the upstream version. The table below tracks which font version is included in each package version. | RNVI version | Upstream version | | ------------ | ---------------- | | > 12.0.0 | 0.0.1 | ## Contributing See the [contributing guide](../../CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. ## License MIT