diff --git a/README.md b/README.md index b9bc855..09068f3 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ -# @exponent/vector-icons +# @expo/vector-icons This library is a compatibility layer around [@oblador/react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) -to work with the Exponent asset system. If you're using React Native -without Exponent, you have no need for this library -- carry on! (or -maybe [check out Exponent](https://getexponent.com/). +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](https://expo.io/). ## Resources -- [@exponent/vector-icons directory](https://exponent.github.io/vector-icons/) - a searchable list of all included icons. -![Screenshot of website](https://raw.githubusercontent.com/exponent/vector-icons/master/website-screenshot.png) -- [Exponent documentation](https://docs.getexponent.com/) +- [@expo/vector-icons directory](https://expo.github.io/vector-icons/) - a searchable list of all included icons. +![Screenshot of website](https://raw.githubusercontent.com/expo/vector-icons/master/website-screenshot.png) +- [Expo documentation](https://docs.expo.io/) diff --git a/createIconSet.js b/createIconSet.js index 84be516..9743c50 100644 --- a/createIconSet.js +++ b/createIconSet.js @@ -1,13 +1,16 @@ import React from 'react'; import { Text } from 'react-native'; -import { Font } from 'exponent'; +import { Font } from 'expo'; import createIconSet from 'react-native-vector-icons/lib/create-icon-set'; -import createIconButtonComponent from 'react-native-vector-icons/lib/icon-button'; +import createIconButtonComponent + from 'react-native-vector-icons/lib/icon-button'; -export default function(glyphMap, fontName, exponentAssetId) { - const exponentFontName = Font.style(fontName, {ignoreWarning: true}).fontFamily; - const font = {[fontName]: exponentAssetId}; - const RNVIconComponent = createIconSet(glyphMap, exponentFontName); +export default function(glyphMap, fontName, expoAssetId) { + const expoFontName = Font.style(fontName, { + ignoreWarning: true, + }).fontFamily; + const font = { [fontName]: expoAssetId }; + const RNVIconComponent = createIconSet(glyphMap, expoFontName); class Icon extends React.Component { static propTypes = RNVIconComponent.propTypes; @@ -15,12 +18,12 @@ export default function(glyphMap, fontName, exponentAssetId) { state = { fontIsLoaded: Font.isLoaded(fontName), - } + }; async componentWillMount() { if (!this.state.fontIsLoaded) { await Font.loadAsync(font); - this.setState({fontIsLoaded: true}); + this.setState({ fontIsLoaded: true }); } } @@ -37,7 +40,9 @@ export default function(glyphMap, fontName, exponentAssetId) { return ( { this._icon = view; }} + ref={view => { + this._icon = view; + }} {...this.props} /> ); diff --git a/createIconSetFromFontello.js b/createIconSetFromFontello.js index b52e6f3..6032bea 100644 --- a/createIconSetFromFontello.js +++ b/createIconSetFromFontello.js @@ -1,6 +1,11 @@ -import { Font } from 'exponent'; -import createIconSetFromFontello from 'react-native-vector-icons/lib/create-icon-set-from-fontello'; +import { Font } from 'expo'; +import createIconSetFromFontello + from 'react-native-vector-icons/lib/create-icon-set-from-fontello'; -export default function(config, exponentFontName, exponentAssetId) { - return createIconSetFromFontello(config, Font.style(exponentFontName).fontFamily, exponentAssetId); +export default function(config, expoFontName, expoAssetId) { + return createIconSetFromFontello( + config, + Font.style(expoFontName).fontFamily, + expoAssetId + ); } diff --git a/createIconSetFromIcoMoon.js b/createIconSetFromIcoMoon.js index 4597534..f4505d2 100644 --- a/createIconSetFromIcoMoon.js +++ b/createIconSetFromIcoMoon.js @@ -1,6 +1,11 @@ -import { Font } from 'exponent'; -import createIconSetFromIcoMoon from 'react-native-vector-icons/lib/create-icon-set-from-icomoon'; +import { Font } from 'expo'; +import createIconSetFromIcoMoon + from 'react-native-vector-icons/lib/create-icon-set-from-icomoon'; -export default function(config, exponentFontName, exponentAssetId) { - return createIconSetFromIcoMoon(config, Font.style(exponentFontName).fontFamily, exponentAssetId); +export default function(config, expoFontName, expoAssetId) { + return createIconSetFromIcoMoon( + config, + Font.style(expoFontName).fontFamily, + expoAssetId + ); } diff --git a/package.json b/package.json index 5e918d9..f788d9d 100644 --- a/package.json +++ b/package.json @@ -1,22 +1,22 @@ { - "name": "@exponent/vector-icons", + "name": "@expo/vector-icons", "version": "4.0.0", - "description": "Built-in support for 8 popular icon fonts and the tooling to create your own Icon components from your font and glyph map. This is a wrapper around react-native-vector-icons to make it compatible with Exponent.", + "description": "Built-in support for 10 popular icon fonts and the tooling to create your own Icon components from your font and glyph map. This is a wrapper around react-native-vector-icons to make it compatible with Expo.", "main": "index.js", "scripts": {}, "repository": { "type": "git", - "url": "https://github.com/exponent/vector-icons.git" + "url": "https://github.com/expo/vector-icons.git" }, "keywords": [ - "exponent" + "expo" ], "author": "Brent Vatne", "license": "MIT", "bugs": { - "url": "https://github.com/exponent/vector-icons/issues" + "url": "https://github.com/expo/vector-icons/issues" }, - "homepage": "https://exponent.github.io/vector-icons", + "homepage": "https://expo.github.io/vector-icons", "dependencies": { "react-native-vector-icons": "4.0.0" }, diff --git a/website/package.json b/website/package.json index 37cef09..526433c 100644 --- a/website/package.json +++ b/website/package.json @@ -1,8 +1,8 @@ { - "name": "@exponent/vector-icons-website", + "name": "@expo/vector-icons-website", "version": "0.0.1", "private": true, - "homepage": "https://exponent.github.io/vector-icons", + "homepage": "https://expo.github.io/vector-icons", "devDependencies": { "gh-pages": "^0.11.0", "react-scripts": "0.7.0" diff --git a/website/public/index.html b/website/public/index.html index 90ddef9..14b02e1 100644 --- a/website/public/index.html +++ b/website/public/index.html @@ -3,7 +3,7 @@ - @exponent/vector-icons directory + @expo/vector-icons directory
diff --git a/website/src/App.js b/website/src/App.js index f1a5c9e..1acdac5 100644 --- a/website/src/App.js +++ b/website/src/App.js @@ -8,34 +8,40 @@ const IconFamilies = { FontAwesome: require('react-native-vector-icons/glyphmaps/FontAwesome.json'), Foundation: require('react-native-vector-icons/glyphmaps/Foundation.json'), Ionicons: require('react-native-vector-icons/glyphmaps/Ionicons.json'), - MaterialIcons: require('react-native-vector-icons/glyphmaps/MaterialIcons.json'), - MaterialCommunityIcons: require('react-native-vector-icons/glyphmaps/MaterialCommunityIcons.json'), - SimpleLineIcons: require('react-native-vector-icons/glyphmaps/SimpleLineIcons.json'), + MaterialIcons: require( + 'react-native-vector-icons/glyphmaps/MaterialIcons.json' + ), + MaterialCommunityIcons: require( + 'react-native-vector-icons/glyphmaps/MaterialCommunityIcons.json' + ), + SimpleLineIcons: require( + 'react-native-vector-icons/glyphmaps/SimpleLineIcons.json' + ), Octicons: require('react-native-vector-icons/glyphmaps/Octicons.json'), Zocial: require('react-native-vector-icons/glyphmaps/Zocial.json'), -} +}; class Icon extends Component { render() { return ( - + {String.fromCharCode(IconFamilies[this.props.family][this.props.name])} ); } } -const HeaderBar = (props) => { +const HeaderBar = props => { return (

- @exponent/vector-icons directory + @expo/vector-icons directory

); -} +}; class SearchBar extends Component { render() { @@ -48,7 +54,8 @@ class SearchBar extends Component { ref={input => this._input = input} placeholder="Search for an icon" type="text" - className="Search-Input" /> + className="Search-Input" + /> @@ -67,7 +74,7 @@ class App extends Component { this.state = { matches: [], - } + }; } componentDidMount() { @@ -90,7 +97,14 @@ class App extends Component { _renderFamily(familyName) { return (
- {Object.keys(IconFamilies[familyName]).map(iconName => )} + {Object.keys(IconFamilies[familyName]) + .map(iconName => ( + + ))}
); } @@ -101,11 +115,11 @@ class App extends Component { let names = Object.keys(icons); let results = names.filter(name => name.indexOf(text) >= 0); if (results.length) { - matches = [...matches, {family, names: results}]; + matches = [...matches, { family, names: results }]; } }); - this.setState({matches}); + this.setState({ matches }); } _renderMatch(match) { @@ -124,11 +138,7 @@ class App extends Component { _renderIcon(family, name) { return (
- +

{name}