mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-10-03 22:37:03 +00:00
Merge pull request #17506 from iRoachie/master
Added react-native-vector-icons definitions
This commit is contained in:
Paul van Brenk
+2
@@ -0,0 +1,2 @@
|
||||
import { Icon } from './Icon';
|
||||
export default Icon;
|
||||
@@ -0,0 +1,2 @@
|
||||
import { Icon } from './Icon';
|
||||
export default Icon;
|
||||
@@ -0,0 +1,2 @@
|
||||
import { Icon } from './Icon';
|
||||
export default Icon;
|
||||
@@ -0,0 +1,2 @@
|
||||
import { Icon } from './Icon';
|
||||
export default Icon;
|
||||
+197
@@ -0,0 +1,197 @@
|
||||
import * as React from 'react';
|
||||
import {
|
||||
TextStyle,
|
||||
ViewStyle,
|
||||
TextProperties,
|
||||
TouchableHighlightProperties,
|
||||
TouchableNativeFeedbackProperties,
|
||||
TabBarIOSProperties,
|
||||
ToolbarAndroidProperties
|
||||
} from 'react-native';
|
||||
|
||||
export interface IconProps extends TextProperties {
|
||||
/**
|
||||
* Size of the icon, can also be passed as fontSize in the style object.
|
||||
*
|
||||
* @default 12
|
||||
* @type {string}
|
||||
* @memberof IconProps
|
||||
*/
|
||||
size?: number;
|
||||
|
||||
/**
|
||||
* Name of the icon to show
|
||||
*
|
||||
* See Icon Explorer app
|
||||
* {@link https://github.com/oblador/react-native-vector-icons/tree/master/Examples/IconExplorer}
|
||||
* @type {string}
|
||||
* @memberof IconProps
|
||||
*/
|
||||
name: string;
|
||||
|
||||
/**
|
||||
* Color of the icon
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof IconProps
|
||||
*/
|
||||
color?: string;
|
||||
}
|
||||
|
||||
export interface IconButtonProps extends IconProps, TouchableHighlightProperties, TouchableNativeFeedbackProperties {
|
||||
/**
|
||||
* Text and icon color
|
||||
* Use iconStyle or nest a Text component if you need different colors.
|
||||
*
|
||||
* @default 'white'
|
||||
* @type {string}
|
||||
* @memberof IconButtonProps
|
||||
*/
|
||||
color?: string;
|
||||
|
||||
/**
|
||||
* Border radius of the button
|
||||
* Set to 0 to disable.
|
||||
*
|
||||
* @default 5
|
||||
* @type {number}
|
||||
* @memberof IconButtonProps
|
||||
*/
|
||||
borderRadius?: number;
|
||||
|
||||
/**
|
||||
* Styles applied to the icon only
|
||||
* Good for setting margins or a different color.
|
||||
*
|
||||
* @default {marginRight: 10}
|
||||
* @type {ViewStyle}
|
||||
* @memberof IconButtonProps
|
||||
*/
|
||||
iconStyle?: ViewStyle;
|
||||
|
||||
/**
|
||||
* Style prop inherited from TextProperties and TouchableWithoutFeedbackProperties
|
||||
* Only exist here so we can have ViewStyle or TextStyle
|
||||
*
|
||||
* @type {(ViewStyle | TextStyle)}
|
||||
* @memberof IconButtonProps
|
||||
*/
|
||||
style?: ViewStyle | TextStyle;
|
||||
|
||||
/**
|
||||
* Background color of the button
|
||||
*
|
||||
* @default '#007AFF'
|
||||
* @type {string}
|
||||
* @memberof IconButtonProps
|
||||
*/
|
||||
backgroundColor?: string;
|
||||
}
|
||||
|
||||
export type ImageSource = any;
|
||||
|
||||
export interface TabBarIOSProps extends TabBarIOSProperties {
|
||||
/**
|
||||
* Name of the default icon (similar to TabBarIOS.Item icon)
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof TabBarIOSProps
|
||||
*/
|
||||
iconName: string;
|
||||
|
||||
/**
|
||||
* Name of the selected icon (similar to TabBarIOS.Item selectedIcon).
|
||||
*
|
||||
* @default iconName
|
||||
* @type {string}
|
||||
* @memberof TabBarIOSProps
|
||||
*/
|
||||
selectedIconName: string;
|
||||
|
||||
/**
|
||||
* Size of the icon.
|
||||
*
|
||||
* @default 30
|
||||
* @type {number}
|
||||
* @memberof TabBarIOSProps
|
||||
*/
|
||||
iconSize: number;
|
||||
|
||||
/**
|
||||
* Color of the icon
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof TabBarIOSProps
|
||||
*/
|
||||
iconColor: string;
|
||||
|
||||
/**
|
||||
* Color of the selected icon.
|
||||
*
|
||||
* @default iconColor
|
||||
* @type {string}
|
||||
* @memberof TabBarIOSProps
|
||||
*/
|
||||
selectedIconColor: string;
|
||||
}
|
||||
|
||||
export interface ToolbarAndroidProps extends ToolbarAndroidProperties {
|
||||
/**
|
||||
* Name of the navigation logo icon
|
||||
* (similar to ToolbarAndroid logo)
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof ToolbarAndroidProps
|
||||
*/
|
||||
logoName: string;
|
||||
|
||||
/**
|
||||
* Name of the navigation icon
|
||||
* (similar to ToolbarAndroid navIcon)
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof ToolbarAndroidProps
|
||||
*/
|
||||
navIconName: string;
|
||||
|
||||
/**
|
||||
* Name of the overflow icon
|
||||
* (similar to ToolbarAndroid overflowIcon)
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof ToolbarAndroidProps
|
||||
*/
|
||||
overflowIconName: string;
|
||||
|
||||
/**
|
||||
* Size of the icons
|
||||
*
|
||||
* @default 24
|
||||
* @type {number}
|
||||
* @memberof ToolbarAndroidProps
|
||||
*/
|
||||
iconSize: number;
|
||||
|
||||
/**
|
||||
* Color of the icons
|
||||
*
|
||||
* @default 'black'
|
||||
* @type {string}
|
||||
* @memberof ToolbarAndroidProps
|
||||
*/
|
||||
iconColor: string;
|
||||
}
|
||||
|
||||
export class Icon extends React.Component<IconProps, any> {
|
||||
static getImageSource(
|
||||
name: string,
|
||||
color: string,
|
||||
size?: number
|
||||
): Promise<ImageSource>;
|
||||
}
|
||||
|
||||
export namespace Icon {
|
||||
class ToolbarAndroid extends React.Component<ToolbarAndroidProps, any> {}
|
||||
class TabBarIOS extends React.Component<TabBarIOSProps, any> {}
|
||||
class Button extends React.Component<IconButtonProps, any> {}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
import { Icon } from './Icon';
|
||||
export default Icon;
|
||||
@@ -0,0 +1,2 @@
|
||||
import { Icon } from './Icon';
|
||||
export default Icon;
|
||||
@@ -0,0 +1,2 @@
|
||||
import { Icon } from './Icon';
|
||||
export default Icon;
|
||||
@@ -0,0 +1,2 @@
|
||||
import { Icon } from './Icon';
|
||||
export default Icon;
|
||||
@@ -0,0 +1,2 @@
|
||||
import { Icon } from './Icon';
|
||||
export default Icon;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
import { Icon } from './Icon';
|
||||
export default Icon;
|
||||
+61
@@ -0,0 +1,61 @@
|
||||
// Type definitions for react-native-vector-icons 4.2
|
||||
// Project: https://github.com/oblador/react-native-vector-icons
|
||||
// Definitions by: Kyle Roach <https://github.com/iRoachie>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.3
|
||||
|
||||
import * as React from 'react';
|
||||
import { Icon } from './Icon';
|
||||
import { TextProperties } from 'react-native';
|
||||
|
||||
/**
|
||||
* 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 it's character code. fontFamily is the name
|
||||
* of the font NOT the filename. Open the font in Font Book.app or similar to learn the name.
|
||||
* Optionally pass the third fontFile argument for android support, it should be a path
|
||||
* to the font file in you asset folder.
|
||||
*
|
||||
* @param glyphMap
|
||||
* @param fontFamily
|
||||
* @param fontFile
|
||||
*/
|
||||
export function createIconSet(
|
||||
glyphMap: {},
|
||||
fontFamily: string,
|
||||
fontFile?: string
|
||||
): Icon;
|
||||
|
||||
/**
|
||||
* Convenience method to create a custom font based on a fontello config file.
|
||||
* Don't forget to import the font as described above and drop the config.json
|
||||
* somewhere convenient in your project.
|
||||
*
|
||||
* Example usage
|
||||
* import { createIconSetFromFontello } from 'react-native-vector-icons';
|
||||
* import fontelloConfig from './config.json';
|
||||
* const Icon = createIconSetFromFontello(fontelloConfig);
|
||||
*
|
||||
* @see http://fontello.com
|
||||
* @export
|
||||
* @param {{}} config
|
||||
* @returns {Icon}
|
||||
*/
|
||||
export function createIconSetFromFontello(config: {}): Icon;
|
||||
|
||||
/**
|
||||
* Convenience method to create a custom font from IcoMoon
|
||||
* Make sure you're using the Download option in IcoMoon, and use the .json file that's
|
||||
* included in the .zip you've downloaded. You'll also need to import the .ttf font
|
||||
* file into your project
|
||||
*
|
||||
* Example usage
|
||||
* import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
|
||||
* import icoMoonConfig from './config.json';
|
||||
* const Icon = createIconSetFromIcoMoon(icoMoonConfig);
|
||||
*
|
||||
* @see https://icomoon.io/app
|
||||
* @export
|
||||
* @param {{}} config
|
||||
* @returns {Icon}
|
||||
*/
|
||||
export function createIconSetFromIcoMoon(config: {}): Icon;
|
||||
@@ -0,0 +1,30 @@
|
||||
import * as React from 'react';
|
||||
import { View, Text } from 'react-native';
|
||||
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
|
||||
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
|
||||
|
||||
class Example extends React.Component<{}, {}> {
|
||||
handleButton() {
|
||||
console.log('You pressed me');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
{/* Normal Icon */}
|
||||
<MaterialIcon size={30} color="red" name="exit" />
|
||||
|
||||
{/* Icon button */}
|
||||
<FontAwesomeIcon.Button
|
||||
backgroundColor="#3b5998"
|
||||
name="facebook"
|
||||
onPress={() => this.handleButton()}
|
||||
>
|
||||
<Text style={{ fontFamily: 'Arial', fontSize: 15 }}>
|
||||
Login with Facebook
|
||||
</Text>
|
||||
</FontAwesomeIcon.Button>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"dom",
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"jsx": "react"
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"Icon.d.ts",
|
||||
"Entypo.d.ts",
|
||||
"EvilIcons.d.ts",
|
||||
"FontAwesome.d.ts",
|
||||
"Foundation.d.ts",
|
||||
"Ionicons.d.ts",
|
||||
"MaterialCommunityIcons.d.ts",
|
||||
"MaterialIcons.d.ts",
|
||||
"Octicons.d.ts",
|
||||
"SimpleLineIcons.d.ts",
|
||||
"Zocial.d.ts",
|
||||
"react-native-vector-icons-tests.tsx"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
Reference in New Issue
Block a user