@expo/vector-icons
Advanced tools
Package description
@expo/vector-icons is a popular npm package that provides a set of customizable icons for React Native applications. It includes a wide variety of icons from different icon sets such as FontAwesome, MaterialIcons, Ionicons, and more. This package is particularly useful for developers looking to enhance the visual appeal of their applications with minimal effort.
Basic Icon Usage
This feature allows you to easily include icons in your React Native application. The example demonstrates how to import and use a FontAwesome icon.
import React from 'react';
import { View } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
const App = () => (
<View>
<FontAwesome name="home" size={24} color="black" />
</View>
);
export default App;
Customizing Icon Size and Color
This feature allows you to customize the size and color of the icons. The example shows how to use a MaterialIcon with a specific size and color.
import React from 'react';
import { View } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
const App = () => (
<View>
<MaterialIcons name="alarm" size={48} color="red" />
</View>
);
export default App;
Using Different Icon Sets
This feature allows you to use icons from different icon sets within the same application. The example demonstrates the usage of Ionicons and Entypo icons.
import React from 'react';
import { View } from 'react-native';
import { Ionicons, Entypo } from '@expo/vector-icons';
const App = () => (
<View>
<Ionicons name="ios-add-circle" size={32} color="green" />
<Entypo name="aircraft" size={32} color="blue" />
</View>
);
export default App;
react-native-vector-icons is another popular package that provides a wide range of customizable icons for React Native applications. It supports multiple icon sets like FontAwesome, MaterialIcons, and Ionicons, similar to @expo/vector-icons. However, it requires additional setup for linking the native dependencies, whereas @expo/vector-icons is more straightforward to use with Expo projects.
react-icons is a versatile package that provides a collection of icons for React applications, including web and React Native. It supports a wide range of icon sets and allows for easy integration and customization. While it is not specifically tailored for React Native like @expo/vector-icons, it offers a broader range of icons and can be used in various types of React projects.
react-native-elements is a UI toolkit for React Native that includes a set of customizable components, including icons. It uses react-native-vector-icons under the hood for its icon component, providing a seamless experience for adding icons to your application. It offers additional UI components beyond just icons, making it a more comprehensive solution for building React Native applications.
Readme
This library is a compatibility layer around @oblador/react-native-vector-icons to work with the Expo asset system. If you're using React Native without Expo, you have no need for this library -- carry on! (or maybe check out Expo).
👀: this library does not provide access to react-native-vector-icon's
Icon.getImageSource()function for generating images from icons at runtime (for context on why, see this issue). If you find yourself needing an icon in the form of an image rather than text, you should generate that image yourself and bundle it with your app.
This library is part of the expo package, so if you are using expo you can simply use it like so
import React from 'react';
import { Ionicons } from '@expo/vector-icons';
export default class IconExample extends React.Component {
render() {
return <Ionicons name="md-checkmark-circle" size={32} color="green" />;
}
}
for more usage see Expo icons documentation
I'll be honest with you, it's not straightforward. You should set aside about an hour to do this.
src/vendor/react-native-vector-icons, except the dotfiles.git status and look at the untracked files. Remove anything that doesn't seem needed. For example, remove package.json, react-native.config.js, react-native.osx.js. Things to look out for are new icon fonts or new create-* files.git diff **/*.js - do any of the changes look like they should be synced over to the equivalent .ts files in src?/@expo/vector-icons internals are different enough that you don't need to worry about it.bin scripts, in which case we need them.yarn when you're done and it'll copy vendor files over to build.Create a commit on master.
FAQs
Unknown package
The npm package @expo/vector-icons receives a total of 429,812 weekly downloads. As such, @expo/vector-icons popularity was classified as popular.
We found that @expo/vector-icons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 26 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cyber insurance rates are dropping as the market matures, according to a new report projecting global premiums to reach $43 billion by 2030, driven by international market uptake and growth in the SME sector.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.