kylefang/react-native-vector-icons
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-vector-icons.git synced 2026-04-28 20:25:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

Split createIconSet* functions into separate files and expose them via @providesModule for easier external usage.

Browse Source
This commit is contained in:
Joel Arvidsson
2015-05-17 03:09:05 +02:00
parent 09e62802fe
commit e67a86b28a
11 changed files with 105 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Entypo.js
View File

@@ -6,7 +6,7 @@
*/
'use strict';
var createIconSet = require('./').createIconSet;
var createIconSet = require('createIconSet');
var glyphMap = {
"500px": 61696,
"500px-with-circle": 61697,

2
EvilIcons.js
View File

@@ -6,7 +6,7 @@
*/
'use strict';
var createIconSet = require('./').createIconSet;
var createIconSet = require('createIconSet');
var glyphMap = {
"ei-archive": 61696,
"ei-arrow-down": 61697,

2
FontAwesome.js
View File

@@ -6,7 +6,7 @@
*/
'use strict';
var createIconSet = require('./').createIconSet;
var createIconSet = require('createIconSet');
var glyphMap = {
"glass": 61440,
"music": 61441,

2
Foundation.js
View File

@@ -6,7 +6,7 @@
*/
'use strict';
var createIconSet = require('./').createIconSet;
var createIconSet = require('createIconSet');
var glyphMap = {
"address-book": 61696,
"alert": 61697,

2
Ionicons.js
View File

@@ -6,7 +6,7 @@
*/
'use strict';
var createIconSet = require('./').createIconSet;
var createIconSet = require('createIconSet');
var glyphMap = {
"alert": 61697,
"alert-circled": 61696,

2
MaterialDesign.js
View File

@@ -6,7 +6,7 @@
*/
'use strict';
var createIconSet = require('./').createIconSet;
var createIconSet = require('createIconSet');
var glyphMap = {
"3d-rotation": 61440,
"accessibility": 61441,

6
README.md
View File

@@ -22,7 +22,7 @@ If you want to use any of the bundled icons, you need to add the icon fonts to y
You can either use one of the bundled icons or roll your own custom font. Currently available options for bundled icon sets are:
* [`Entypo`](http://entypo.com) by Daniel Bruce (**411** icons)
* [`EvilIcons`](http://evil-icons.io) by Alexander Madyankin & Roman Shamin (**68** icons)
* [`EvilIcons`](http://evil-icons.io) by Alexander Madyankin & Roman Shamin (v1.7.6, **68** icons)
* [`FontAwesome`](http://fortawesome.github.io/Font-Awesome/icons/) by Dave Gandy (v4.3, **519** icons)
* [`Foundation`](http://zurb.com/playground/foundation-icon-fonts-3) by ZURB, Inc. (v3.0, **283** icons)
* [`Ionicons`](http://ionicons.com/) by Ben Sperry (v2.0.1, **734** icons)
@@ -70,7 +70,7 @@ It's possible to nest the icons, any child content will appear after the icon, s
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.
```js
var { createIconSet } = require('react-native-vector-icons');
var createIconSet = require('createIconSet');
var glyphMap = { 'icon-name': 1234, test: '∆' };
var Icon = createIconSet(glyphMap, 'FontName');
```
@@ -79,7 +79,7 @@ var Icon = createIconSet(glyphMap, 'FontName');
Convenience method to create a custom font based on a [fontello](http://fontello.com) config file. Don't forget to import the font as described above and drop the `config.json` somewhere convenient in your project.
```js
var { createIconSetFromFontello } = require('react-native-vector-icons');
var require('createIconSetFromFontello');
var fontelloConfig = require('./config.json');
var Icon = createIconSetFromFontello(fontelloConfig);
```

2
Zocial.js
View File

@@ -6,7 +6,7 @@
*/
'use strict';
var createIconSet = require('./').createIconSet;
var createIconSet = require('createIconSet');
var glyphMap = {
"acrobat": 61696,
"amazon": 61697,

80
index.js
View File

@@ -1,83 +1,7 @@
'use strict';
var _ = require('lodash');
var React = require('react-native');
var {
View,
Text,
StyleSheet,
} = React;
var merge = require('merge');
var flattenStyle = require('flattenStyle');
var ViewStylePropTypes = require('ViewStylePropTypes');
var TextStylePropTypes = require('TextStylePropTypes');
function createIconSet(glyphMap, fontFamily) {
var styles = StyleSheet.create({
container: {
overflow: 'hidden',
backgroundColor: 'transparent',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
},
text: {
fontFamily,
}
});
return React.createClass({
propTypes:{
name: React.PropTypes.oneOf(Object.keys(glyphMap)).isRequired,
size: React.PropTypes.number,
color: React.PropTypes.string,
style: React.PropTypes.oneOfType([
React.PropTypes.number, // References to style sheets are numbers
React.PropTypes.object // Inline style declaration
])
},
render: function() {
var name = this.props.name;
var glyph = glyphMap[name] || '?';
if(typeof glyph === 'number') {
glyph = String.fromCharCode(glyph);
}
var containerStyle = _.pick(flattenStyle([styles.container, this.props.style]), Object.keys(ViewStylePropTypes));
var textStyle = _.pick(
flattenStyle([this.props.style, styles.text]),
Object.keys(TextStylePropTypes)
);
var size = this.props.size || textStyle.fontSize || 12;
textStyle.fontSize = size;
textStyle.lineHeight = size;
textStyle.height = size;
if(this.props.color) {
textStyle.color = this.props.color;
}
return (
<View {...this.props} style={[containerStyle]}>
<Text style={textStyle}>{glyph}</Text>
{this.props.children}
</View>
);
}
});
};
function createIconSetFromFontello(config, fontFamily) {
var glyphMap = {};
config.glyphs.forEach(function (glyph) {
glyphMap[glyph.css] = glyph.code;
});
return createIconSet(glyphMap, fontFamily || config.name)
};
var createIconSet = require('./lib/create-icon-set');
var createIconSetFromFontello = require('./lib/create-icon-set-from-fontello');
module.exports = {
createIconSet,

16
lib/create-icon-set-from-fontello.js Normal file
View File

@@ -0,0 +1,16 @@
/**
* @providesModule createIconSetFromFontello
*/
'use strict';
var createIconSet = require('createIconSet');
function createIconSetFromFontello(config, fontFamily) {
var glyphMap = {};
config.glyphs.forEach(function (glyph) {
glyphMap[glyph.css] = glyph.code;
});
return createIconSet(glyphMap, fontFamily || config.name)
};
module.exports = createIconSetFromFontello;

77
lib/create-icon-set.js Normal file
View File

@@ -0,0 +1,77 @@
/**
* @providesModule createIconSet
*/
'use strict';
var _ = require('lodash');
var React = require('react-native');
var {
View,
Text,
StyleSheet,
} = React;
var merge = require('merge');
var flattenStyle = require('flattenStyle');
var ViewStylePropTypes = require('ViewStylePropTypes');
var TextStylePropTypes = require('TextStylePropTypes');
function createIconSet(glyphMap, fontFamily) {
var styles = StyleSheet.create({
container: {
overflow: 'hidden',
backgroundColor: 'transparent',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
},
text: {
fontFamily,
}
});
return React.createClass({
propTypes:{
name: React.PropTypes.oneOf(Object.keys(glyphMap)).isRequired,
size: React.PropTypes.number,
color: React.PropTypes.string,
style: React.PropTypes.oneOfType([
React.PropTypes.number, // References to style sheets are numbers
React.PropTypes.object // Inline style declaration
])
},
render: function() {
var name = this.props.name;
var glyph = glyphMap[name] || '?';
if(typeof glyph === 'number') {
glyph = String.fromCharCode(glyph);
}
var containerStyle = _.pick(flattenStyle([styles.container, this.props.style]), Object.keys(ViewStylePropTypes));
var textStyle = _.pick(
flattenStyle([this.props.style, styles.text]),
Object.keys(TextStylePropTypes)
);
var size = this.props.size || textStyle.fontSize || 12;
textStyle.fontSize = size;
textStyle.lineHeight = size;
textStyle.height = size;
if(this.props.color) {
textStyle.color = this.props.color;
}
return (
<View {...this.props} style={[containerStyle]}>
<Text style={textStyle}>{glyph}</Text>
{this.props.children}
</View>
);
}
});
};
module.exports = createIconSet;