react-native-vector-icons README

The project's README from github.com/oblador/react-native-vector-icons. As one markdown file: README.md.

Vector Icons for React Native

npm npm

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.

[!TIP] If you are still using the old single package react-native-vector-icons visit https://github.com/oblador/react-native-vector-icons/tree/10.x. To migrate to the package-per-icon-set approach, see MIGRATION.md.

Table of Contents

Sponsorship

Should you find this library beneficial, kindly contemplate the option of sponsoring.

Available Icon Sets

Explore all icons.

RNVI comes with the following supported icons. You can search NPM for third party icons.

Actively maintained

No longer maintained upstream

Migration

See 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
npm install @react-native-vector-icons/fontawesome-free-solid @react-native-vector-icons/lucide
  1. Depending on the platform you're targeting (iOS/Android/Windows), follow the appropriate setup instructions below.
  2. If you are using one of the following fonts, refer to their guides for further instructions

Setup

Refer to the guide for Expo, React Native or Web 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.

{
  "reactNativeVectorIcons": {
    "fontDir": "src/rnvi-fonts"
  }
}

Icon Component

You can either use one of the bundled icons above or roll your own custom font.

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" />;

Props

Any Text 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 will work as expected, you might find it useful to play around with these:

By combining some of these you can create for example :

type star

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.

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} />;

Alternatively you may use the async method Icon.getImageSource.

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 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 https://fontdrop.info/, Font Book.app or similar to learn the name. Also pass the fontFileName argument for Android support.

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. 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.

Dynamic icon font loading

TL;DR we recommend you use the /static import if you use Development builds and the root import when using Expo Go.

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 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.

Screenshot of IconExplorer

Basic Example

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

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

Inline Icons

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

const ExampleView = (props) => (
  <Text>
    Lorem <IonIcons name="ios-book" color="#4F8EF7" /> Ipsum
  </Text>
);

Testing

When running tests with jest you will need to mock out the native code loading to prevent errors.

In jest.config.js add

// Mock out font loading
moduleNameMapper: {
  '\\.(ttf)$': '<rootDir>/__mocks__/file-mock.js',
}

Create __mocks__/file-mock.js:

module.exports = {};

Create __mocks__/@react-native-vector-icons/common.js:

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

Changelog

License

This project is licenced under the MIT License.

Any bundled fonts are copyright to their respective authors and mostly under MIT or SIL OFL.

react-native-vector-icons (oblador/react-native-vector-icons)

Searching Database…

17.9K ·GitHub
React-native-vector-icons
这是什么？这是一个 React Native 库，提供可自定义的矢量图标，让你可以把 FontAwesome、Ionicons、MaterialDesignIcons 等流行图标集中的图标加入应用，并支持完整的样式设置。
这是一个图标包，还是多个独立的包？自从迁移到每个图标集单独一个包的方式后，每个图标集（FontAwesome、Ionicons、Feather 等）都以独立的 npm 包形式安装，而不是一个大包。
我该如何在项目中添加图标？安装你想使用的图标集对应的 npm 包，然后按照针对具体平台（iOS/Android/Windows）的设置指南操作，并链接所需的字体文件。Expo、React Native 或 Web 各有单独的说明。
使用图片源功能一定需要 Expo 吗？要将图标作为位图/PNG 图片源（Image source）使用，你需要安装了 expo-font 的 Expo，或者单独安装 @react-native-vector-icons/get-image 包。
动态加载图标总是最好的选择吗？默认的（根）导入方式会在运行时动态加载字体，这对 Expo Go 来说是推荐的做法。但如果你不需要这样做，应改用 /static 导入，在构建时加载，尤其是在开发构建中。
它支持哪些平台？它面向 iOS、Android 和 Windows 上的 React Native 应用，并支持 Expo 和 Web 环境。
内置了哪些图标集？目前仍在积极维护的图标集包括 AntDesign、Feather、FontAwesome（v7）、Foundation、Ionicons、MaterialDesignIcons、Octicons 和 Lucide。较旧的图标集包括 Entypo、FontAwesome 4/5/6、Fontisto、MaterialIcons、SimpleLineIcons 和 Zocial，仍可使用，但上游已不再更新。
我可以创建自己的自定义图标字体吗？可以。你可以使用内置的图标生成器构建自己的字体包（参见 CREATEFONTPACKAGE.md），也可以在自己的项目中用字形映射直接调用 createIconSet()。
如何为图标添加动画？用 React Native 的 Animated.createAnimatedComponent(Icon) 包裹 Icon 组件，或者使用更高级的 react-native-animatable 库来实现更复杂的动画。
使用前如何预览图标名称？运行自带的 IconExplorer 示例应用（位于 Examples/IconExplorer 文件夹），即可交互式地浏览和搜索图标名称。
What are similar projects?react-native-calendars, awesome-react-native, expo-backdrop, ng-native, morphlet, tabler-icons, react-native-ui-kitten, react-native-snap-carousel
Which topics is it in?icon, icon-pack, expo, font, react-native, mobile-development, svg, ui-components, animation, customization, ui, ios
Creator
oblador
Size
29.8 MB
Stars
17.9K
Updated
CommitOct 16Release[email protected]Oct 12
Age
11y
Commits · 90 Days