File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 1+ # React Native Ionicons
2+
3+ Use the latest [ Ionicons] ( https://ionic.io/ionicons/ ) (v6+) in your React Native project :tada : .
4+
5+ Based on this fantastic work [ https://github.com/michaelbnd/react-native-ionicons ] ( https://github.com/michaelbnd/react-native-ionicons )
6+
7+ ## About Ionicons
8+ Ionicons is a completely open-source icon set with 1,300+ icons.
9+
10+
11+ Each icon has an outline, filled, and sharp variant.
12+
13+ #### Outline
14+
15+ <img width =" 100 " src =" https://unpkg.com/ionicons@6.1.1/dist/svg/glasses-outline.svg " >
16+
17+ #### Filled
18+
19+ <img width =" 100 " src =" https://unpkg.com/ionicons@6.1.1/dist/svg/glasses.svg " >
20+
21+ #### Sharp
22+
23+ <img width =" 100 " src =" https://unpkg.com/ionicons@6.1.1/dist/svg/glasses-sharp.svg " >
24+
25+
26+ ## Install
27+ ```
28+ npm install @mrkpatchaa/react-native-ionicons
29+ npm install react-native-svg
30+ npx pod-install
31+ ```
32+
33+ ## Usage
34+ ``` javascript
35+ import React from ' react' ;
36+ import {View } from ' react-native' ;
37+ import {Icon } from ' @mrkpatchaa/react-native-ionicons' ;
38+
39+ export default function App () {
40+ return (
41+ < View style= {{flex: 1 , alignItems: ' center' , justifyContent: ' center' , flexDirection: ' row' }}>
42+ < Icon name= " rocket-outline" size= {64 } color= " #000" / >
43+ < Icon name= " rocket" size= {64 } color= " #000" / >
44+ < Icon name= " rocket-sharp" size= {64 } color= " #000" / >
45+ < / View>
46+ );
47+ }
48+ ```
49+
50+ ## Jest
51+ Add the lines below in your package.json inside the "jest" key if you are testing your project with [ Jest] ( https://jestjs.io ) .
52+
53+
54+ ```
55+ "transformIgnorePatterns": [
56+ "/node_modules/(?!react-native)/.+"
57+ ]
58+ ```
You can’t perform that action at this time.
0 commit comments