diff --git a/build/createIconSet.d.ts b/build/createIconSet.d.ts index 9ab570c..3f4db5c 100644 --- a/build/createIconSet.d.ts +++ b/build/createIconSet.d.ts @@ -1,6 +1,6 @@ import React, { ComponentClass } from "react"; import { TextProps, TouchableHighlightProps, ViewProps, OpaqueColorValue, TextStyle, ViewStyle } from "react-native"; -export { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE } from "./vendor/react-native-vector-icons/lib/create-icon-set"; +export { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE, } from "./vendor/react-native-vector-icons/lib/create-icon-set"; export interface IconProps extends TextProps { /** * Size of the icon, can also be passed as fontSize in the style object. diff --git a/build/createIconSet.js b/build/createIconSet.js index 83da366..15cd910 100644 --- a/build/createIconSet.js +++ b/build/createIconSet.js @@ -1,9 +1,9 @@ import * as Font from "expo-font"; import React from "react"; -import { Text } from "react-native"; +import { Text, } from "react-native"; import createIconSet from "./vendor/react-native-vector-icons/lib/create-icon-set"; import createIconButtonComponent from "./vendor/react-native-vector-icons/lib/icon-button"; -export { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE } from "./vendor/react-native-vector-icons/lib/create-icon-set"; +export { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE, } from "./vendor/react-native-vector-icons/lib/create-icon-set"; export default function (glyphMap, fontName, expoAssetId, fontStyle) { var _a; const font = { [fontName]: expoAssetId }; @@ -13,7 +13,7 @@ export default function (glyphMap, fontName, expoAssetId, fontStyle) { super(...arguments); this._mounted = false; this.state = { - fontIsLoaded: Font.isLoaded(fontName) + fontIsLoaded: Font.isLoaded(fontName), }; } async componentDidMount() { @@ -32,10 +32,13 @@ export default function (glyphMap, fontName, expoAssetId, fontStyle) { } } render() { + if (__DEV__ && this.props.name && !(this.props.name in glyphMap)) { + console.warn(`"${this.props.name}" is not a valid icon name for family "${fontName}"`); + } if (!this.state.fontIsLoaded) { return ; } - return ( { + return ( { this._icon = view; }} {...this.props}/>); } diff --git a/build/createIconSet.js.map b/build/createIconSet.js.map index a396886..83aa6e1 100644 --- a/build/createIconSet.js.map +++ b/build/createIconSet.js.map @@ -1 +1 @@ -{"version":3,"file":"createIconSet.js","sourceRoot":"","sources":["../src/createIconSet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAyF,MAAM,cAAc,CAAC;AAE3H,OAAO,aAAa,MAAM,wDAAwD,CAAC;AACnF,OAAO,yBAAyB,MAAM,oDAAoD,CAAC;AAE3F,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EAClB,MAAM,wDAAwD,CAAC;AAiFhE,MAAM,CAAC,OAAO,WACZ,QAAqB,EACrB,QAAY,EACZ,WAAW,EACX,SAAe;;IAEf,MAAM,IAAI,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzC,MAAM,gBAAgB,GAAG,aAAa,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;IAE5E,YAAO,MAAM,IAAK,SAAQ,KAAK,CAAC,SAAuB;YAAhD;;gBASL,aAAQ,GAAG,KAAK,CAAC;gBAGjB,UAAK,GAAG;oBACN,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;iBACtC,CAAC;YAkCJ,CAAC;YAhCC,KAAK,CAAC,iBAAiB;gBACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE;oBAC5B,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;oBAC3B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;iBACxD;YACH,CAAC;YAED,oBAAoB;gBAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACxB,CAAC;YAED,cAAc,CAAC,KAAK;gBAClB,IAAI,IAAI,CAAC,KAAK,EAAE;oBACd,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;iBAClC;YACH,CAAC;YAED,MAAM;gBACJ,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE;oBAC5B,OAAO,CAAC,IAAI,CAAC,AAAD,EAAG,CAAC;iBACjB;gBAED,OAAO,CACL,CAAC,gBAAgB,CACf,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE;oBACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;gBACpB,CAAC,CAAC,CACF,IAAI,IAAI,CAAC,KAAK,CAAC,EACf,CACH,CAAC;YACJ,CAAC;SACF;QA/CQ,eAAY,GAAG,gBAAgB,CAAC,YAAa;QAC7C,SAAM,GAAG,yBAAyB,CAAC,EAAI,CAAE;QACzC,WAAQ,GAAG,QAAS;QACpB,iBAAc,GAAG,GAAG,EAAE,CAAC,QAAS;QAChC,gBAAa,GAAG,GAAG,EAAE,CAAC,QAAS;QAC/B,WAAQ,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAE;QACtC,OAAI,GAAG,IAAK;WAyCnB;AACJ,CAAC","sourcesContent":["import * as Font from \"expo-font\";\nimport React, { ComponentClass } from \"react\";\nimport { Text, TextProps, TouchableHighlightProps, ViewProps, OpaqueColorValue, TextStyle, ViewStyle } from \"react-native\";\n\nimport createIconSet from \"./vendor/react-native-vector-icons/lib/create-icon-set\";\nimport createIconButtonComponent from \"./vendor/react-native-vector-icons/lib/icon-button\";\n\nexport {\n DEFAULT_ICON_COLOR,\n DEFAULT_ICON_SIZE\n} from \"./vendor/react-native-vector-icons/lib/create-icon-set\";\n\nexport interface IconProps extends TextProps {\n /**\n * Size of the icon, can also be passed as fontSize in the style object.\n *\n * @default 12\n */\n size?: number;\n\n /**\n * Name of the icon to show\n *\n * See Icon Explorer app\n * {@link https://expo.github.io/vector-icons/}\n */\n name: GLYPHS;\n\n /**\n * Color of the icon. Can be a string or OpaqueColorValue (returned from\n * PlatformColor(..))\n *\n */\n color?: string | OpaqueColorValue;\n}\n\nexport interface IconButtonProps extends IconProps, ViewProps, TouchableHighlightProps {\n /**\n * Text and icon color\n * Use iconStyle or nest a Text component if you need different colors.\n * Can be a string or OpaqueColorValue (returned from PlatformColor(..))\n *\n * @default 'white'\n */\n color?: string | OpaqueColorValue;\n\n /**\n * Border radius of the button\n * Set to 0 to disable.\n *\n * @default 5\n */\n borderRadius?: number;\n\n /**\n * Styles applied to the icon only\n * Good for setting margins or a different color.\n *\n * @default {marginRight: 10}\n */\n iconStyle?: TextStyle;\n\n /**\n * Style prop inherited from TextProps and TouchableWithoutFeedbackProperties\n * Only exist here so we can have ViewStyle or TextStyle\n *\n */\n style?: ViewStyle | TextStyle;\n\n /**\n * Background color of the button. Can be a string or OpaqueColorValue (returned from\n * PlatformColor(..))\n *\n * @default '#007AFF'\n */\n backgroundColor?: string | OpaqueColorValue;\n}\n\nexport type GlyphMap = { [K in G]: number }\n\nexport interface Icon {\n defaultProps: any;\n Button: ComponentClass>;\n glyphMap: GlyphMap;\n getRawGlyphMap: () => GlyphMap;\n getFontFamily: () => FN;\n loadFont: () => Promise;\n font: { [x: string]: any };\n new (props: IconProps): React.Component>;\n}\n\nexport default function(\n glyphMap: GlyphMap,\n fontName: FN,\n expoAssetId,\n fontStyle?: any\n): Icon {\n const font = { [fontName]: expoAssetId };\n const RNVIconComponent = createIconSet(glyphMap, fontName, null, fontStyle);\n\n return class Icon extends React.Component> {\n static defaultProps = RNVIconComponent.defaultProps;\n static Button = createIconButtonComponent(Icon);\n static glyphMap = glyphMap;\n static getRawGlyphMap = () => glyphMap;\n static getFontFamily = () => fontName;\n static loadFont = () => Font.loadAsync(font);\n static font = font;\n\n _mounted = false;\n _icon?: any;\n\n state = {\n fontIsLoaded: Font.isLoaded(fontName)\n };\n\n async componentDidMount() {\n this._mounted = true;\n if (!this.state.fontIsLoaded) {\n await Font.loadAsync(font);\n this._mounted && this.setState({ fontIsLoaded: true });\n }\n }\n\n componentWillUnmount() {\n this._mounted = false;\n }\n\n setNativeProps(props) {\n if (this._icon) {\n this._icon.setNativeProps(props);\n }\n }\n\n render() {\n if (!this.state.fontIsLoaded) {\n return ;\n }\n\n return (\n {\n this._icon = view;\n }}\n {...this.props}\n />\n );\n }\n };\n}\n"]} \ No newline at end of file +{"version":3,"file":"createIconSet.js","sourceRoot":"","sources":["../src/createIconSet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,EACL,IAAI,GAOL,MAAM,cAAc,CAAC;AAEtB,OAAO,aAAa,MAAM,wDAAwD,CAAC;AACnF,OAAO,yBAAyB,MAAM,oDAAoD,CAAC;AAE3F,OAAO,EACL,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,wDAAwD,CAAC;AAoFhE,MAAM,CAAC,OAAO,WACZ,QAAqB,EACrB,QAAY,EACZ,WAAW,EACX,SAAe;;IAEf,MAAM,IAAI,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzC,MAAM,gBAAgB,GAAG,aAAa,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;IAE5E,YAAO,MAAM,IAAK,SAAQ,KAAK,CAAC,SAAuB;YAAhD;;gBASL,aAAQ,GAAG,KAAK,CAAC;gBAGjB,UAAK,GAAG;oBACN,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;iBACtC,CAAC;YAwCJ,CAAC;YAtCC,KAAK,CAAC,iBAAiB;gBACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE;oBAC5B,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;oBAC3B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;iBACxD;YACH,CAAC;YAED,oBAAoB;gBAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACxB,CAAC;YAED,cAAc,CAAC,KAAK;gBAClB,IAAI,IAAI,CAAC,KAAK,EAAE;oBACd,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;iBAClC;YACH,CAAC;YAED,MAAM;gBACJ,IAAI,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,QAAQ,CAAC,EAAE;oBAChE,OAAO,CAAC,IAAI,CACV,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,0CAA0C,QAAQ,GAAG,CACzE,CAAC;iBACH;gBAED,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE;oBAC5B,OAAO,CAAC,IAAI,CAAC,AAAD,EAAG,CAAC;iBACjB;gBAED,OAAO,CACL,CAAC,gBAAgB,CACf,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE;oBACZ,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;gBACpB,CAAC,CAAC,CACF,IAAI,IAAI,CAAC,KAAK,CAAC,EACf,CACH,CAAC;YACJ,CAAC;SACF;QArDQ,eAAY,GAAG,gBAAgB,CAAC,YAAa;QAC7C,SAAM,GAAG,yBAAyB,CAAC,EAAI,CAAE;QACzC,WAAQ,GAAG,QAAS;QACpB,iBAAc,GAAG,GAAG,EAAE,CAAC,QAAS;QAChC,gBAAa,GAAG,GAAG,EAAE,CAAC,QAAS;QAC/B,WAAQ,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAE;QACtC,OAAI,GAAG,IAAK;WA+CnB;AACJ,CAAC","sourcesContent":["import * as Font from \"expo-font\";\nimport React, { ComponentClass } from \"react\";\nimport {\n Text,\n TextProps,\n TouchableHighlightProps,\n ViewProps,\n OpaqueColorValue,\n TextStyle,\n ViewStyle,\n} from \"react-native\";\n\nimport createIconSet from \"./vendor/react-native-vector-icons/lib/create-icon-set\";\nimport createIconButtonComponent from \"./vendor/react-native-vector-icons/lib/icon-button\";\n\nexport {\n DEFAULT_ICON_COLOR,\n DEFAULT_ICON_SIZE,\n} from \"./vendor/react-native-vector-icons/lib/create-icon-set\";\n\nexport interface IconProps extends TextProps {\n /**\n * Size of the icon, can also be passed as fontSize in the style object.\n *\n * @default 12\n */\n size?: number;\n\n /**\n * Name of the icon to show\n *\n * See Icon Explorer app\n * {@link https://expo.github.io/vector-icons/}\n */\n name: GLYPHS;\n\n /**\n * Color of the icon. Can be a string or OpaqueColorValue (returned from\n * PlatformColor(..))\n *\n */\n color?: string | OpaqueColorValue;\n}\n\nexport interface IconButtonProps\n extends IconProps,\n ViewProps,\n TouchableHighlightProps {\n /**\n * Text and icon color\n * Use iconStyle or nest a Text component if you need different colors.\n * Can be a string or OpaqueColorValue (returned from PlatformColor(..))\n *\n * @default 'white'\n */\n color?: string | OpaqueColorValue;\n\n /**\n * Border radius of the button\n * Set to 0 to disable.\n *\n * @default 5\n */\n borderRadius?: number;\n\n /**\n * Styles applied to the icon only\n * Good for setting margins or a different color.\n *\n * @default {marginRight: 10}\n */\n iconStyle?: TextStyle;\n\n /**\n * Style prop inherited from TextProps and TouchableWithoutFeedbackProperties\n * Only exist here so we can have ViewStyle or TextStyle\n *\n */\n style?: ViewStyle | TextStyle;\n\n /**\n * Background color of the button. Can be a string or OpaqueColorValue (returned from\n * PlatformColor(..))\n *\n * @default '#007AFF'\n */\n backgroundColor?: string | OpaqueColorValue;\n}\n\nexport type GlyphMap = { [K in G]: number | string };\n\nexport interface Icon {\n defaultProps: any;\n Button: ComponentClass>;\n glyphMap: GlyphMap;\n getRawGlyphMap: () => GlyphMap;\n getFontFamily: () => FN;\n loadFont: () => Promise;\n font: { [x: string]: any };\n new (props: IconProps): React.Component>;\n}\n\nexport default function (\n glyphMap: GlyphMap,\n fontName: FN,\n expoAssetId,\n fontStyle?: any\n): Icon {\n const font = { [fontName]: expoAssetId };\n const RNVIconComponent = createIconSet(glyphMap, fontName, null, fontStyle);\n\n return class Icon extends React.Component> {\n static defaultProps = RNVIconComponent.defaultProps;\n static Button = createIconButtonComponent(Icon);\n static glyphMap = glyphMap;\n static getRawGlyphMap = () => glyphMap;\n static getFontFamily = () => fontName;\n static loadFont = () => Font.loadAsync(font);\n static font = font;\n\n _mounted = false;\n _icon?: any;\n\n state = {\n fontIsLoaded: Font.isLoaded(fontName),\n };\n\n async componentDidMount() {\n this._mounted = true;\n if (!this.state.fontIsLoaded) {\n await Font.loadAsync(font);\n this._mounted && this.setState({ fontIsLoaded: true });\n }\n }\n\n componentWillUnmount() {\n this._mounted = false;\n }\n\n setNativeProps(props) {\n if (this._icon) {\n this._icon.setNativeProps(props);\n }\n }\n\n render() {\n if (__DEV__ && this.props.name && !(this.props.name in glyphMap)) {\n console.warn(\n `\"${this.props.name}\" is not a valid icon name for family \"${fontName}\"`\n );\n }\n\n if (!this.state.fontIsLoaded) {\n return ;\n }\n\n return (\n {\n this._icon = view;\n }}\n {...this.props}\n />\n );\n }\n };\n}\n"]} \ No newline at end of file diff --git a/src/createIconSet.tsx b/src/createIconSet.tsx index 65c9e01..7adb85a 100644 --- a/src/createIconSet.tsx +++ b/src/createIconSet.tsx @@ -1,13 +1,21 @@ import * as Font from "expo-font"; import React, { ComponentClass } from "react"; -import { Text, TextProps, TouchableHighlightProps, ViewProps, OpaqueColorValue, TextStyle, ViewStyle } from "react-native"; +import { + Text, + TextProps, + TouchableHighlightProps, + ViewProps, + OpaqueColorValue, + TextStyle, + ViewStyle, +} from "react-native"; import createIconSet from "./vendor/react-native-vector-icons/lib/create-icon-set"; import createIconButtonComponent from "./vendor/react-native-vector-icons/lib/icon-button"; export { DEFAULT_ICON_COLOR, - DEFAULT_ICON_SIZE + DEFAULT_ICON_SIZE, } from "./vendor/react-native-vector-icons/lib/create-icon-set"; export interface IconProps extends TextProps { @@ -34,7 +42,10 @@ export interface IconProps extends TextProps { color?: string | OpaqueColorValue; } -export interface IconButtonProps extends IconProps, ViewProps, TouchableHighlightProps { +export interface IconButtonProps + extends IconProps, + ViewProps, + TouchableHighlightProps { /** * Text and icon color * Use iconStyle or nest a Text component if you need different colors. @@ -76,7 +87,7 @@ export interface IconButtonProps extends IconProps = { [K in G]: number | string } +export type GlyphMap = { [K in G]: number | string }; export interface Icon { defaultProps: any; @@ -89,7 +100,7 @@ export interface Icon { new (props: IconProps): React.Component>; } -export default function( +export default function ( glyphMap: GlyphMap, fontName: FN, expoAssetId, @@ -111,7 +122,7 @@ export default function( _icon?: any; state = { - fontIsLoaded: Font.isLoaded(fontName) + fontIsLoaded: Font.isLoaded(fontName), }; async componentDidMount() { @@ -133,13 +144,19 @@ export default function( } render() { + if (__DEV__ && this.props.name && !(this.props.name in glyphMap)) { + console.warn( + `"${this.props.name}" is not a valid icon name for family "${fontName}"` + ); + } + if (!this.state.fontIsLoaded) { return ; } return ( { + ref={(view) => { this._icon = view; }} {...this.props}