├── .gitignore
├── README.md
├── index.js
├── initicon.min.js
├── native.js
├── package.json
├── shared.js
└── src
    ├── index.js
    ├── native.js
    └── shared.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Initicon
 2 | > Initial Icons for React
 3 | 
 4 | ![RE](https://drive.google.com/uc?export=view&id=0BwAfqxmTWrImZzdZS1ZweVNlaUU)
 5 | ![A](https://drive.google.com/uc?export=view&id=0BwAfqxmTWrImeWg3TzQ3bWpOZ0k)
 6 | ![C](https://drive.google.com/uc?export=view&id=0BwAfqxmTWrImRHNtQ0hSQmswY0k)
 7 | ![T](https://drive.google.com/uc?export=view&id=0BwAfqxmTWrImMWc2R01Zb2w5OEU)
 8 | 
 9 | ![IN](https://drive.google.com/uc?export=view&id=0BwAfqxmTWrImSjJJdG1CWHdTaEU)
10 | ![IT](https://drive.google.com/uc?export=view&id=0BwAfqxmTWrImREkwUFRwSGM0cjA)
11 | ![IC](https://drive.google.com/uc?export=view&id=0BwAfqxmTWrImanU0WU1WSnNhME0)
12 | ![ON](https://drive.google.com/uc?export=view&id=0BwAfqxmTWrImRXVWZDJyWWhzbHc)
13 | 
14 | [Initicon Demo](https://ccm-innovation.github.io/react-initicon)
15 | 
16 | ## Usage
17 | ```JavaScript
18 | <Initicon
19 |   size={100}
20 |   text="Test Account"
21 |   seed={23}
22 |   single={false}
23 | />
24 | ```
25 | 
26 | ## Browser
27 | ```HTML
28 | <script src="https://rawgit.com/ccm-innovation/react-initicon/master/initicon.min.js"></script>
29 | ```
30 | 
31 | ## Installation
32 | ```
33 | $ npm install --save react-initicon
34 | ```
35 | 
36 | ## Node.js
37 | ```JavaScript
38 | var Initicon = require('react-initicon');
39 | ```
40 | 
41 | ## React Native
42 | ```JavaScript
43 | var Initicon = require('react-initicon/native');
44 | ```
45 | 
46 | ## Props
47 | |Key |Type |Description |
48 | |--- |--- |--- |
49 | |`text`|String|The text to use to make initials|
50 | |`size`|Number|The pixel height / width of the icon|
51 | |`seed`|Number|Number uses to seed the random hue generator|
52 | |`color`|String|Override the background color with any valid CSS color value|
53 | |`single`|Boolean|Whether to only use a single initial or now|
54 | |`saturation`|String|Specify the `hsl` saturation value|
55 | |`brightness`|String|Specify the `hsl` lightness (brightness) value|
56 | 
57 | ## Contributing
58 | Modify the files in the `src` folder. Before committing, update the build by running `npm run build`. This will babelify the code and then compress into `initicon.min.js` for a browser version.
59 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 4 | 
 5 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 6 | 
 7 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 8 | 
 9 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
10 | 
11 | if (typeof require != 'undefined') {
12 |   var React = require('react');
13 | 
14 |   var _require = require('./shared'),
15 |       getBackgroundColor = _require.getBackgroundColor,
16 |       getFontSize = _require.getFontSize,
17 |       getInitials = _require.getInitials,
18 |       defaultProps = _require.defaultProps;
19 | 
20 |   var PropTypes = require('prop-types');
21 | }
22 | 
23 | var Initicon = function (_React$Component) {
24 |   _inherits(Initicon, _React$Component);
25 | 
26 |   function Initicon() {
27 |     _classCallCheck(this, Initicon);
28 | 
29 |     return _possibleConstructorReturn(this, (Initicon.__proto__ || Object.getPrototypeOf(Initicon)).apply(this, arguments));
30 |   }
31 | 
32 |   _createClass(Initicon, [{
33 |     key: 'render',
34 |     value: function render() {
35 |       var props = this.props;
36 | 
37 |       return React.createElement(
38 |         'div',
39 |         { style: { backgroundColor: getBackgroundColor(props),
40 |             height: this.props.size + "px",
41 |             width: this.props.size + "px",
42 |             fontSize: getFontSize(props) + "px",
43 |             lineHeight: this.props.size + "px",
44 |             borderRadius: '50%',
45 |             display: 'inline-block',
46 |             textAlign: 'center',
47 |             color: '#ffffff' } },
48 |         getInitials(props)
49 |       );
50 |     }
51 |   }]);
52 | 
53 |   return Initicon;
54 | }(React.Component);
55 | 
56 | Initicon.propTypes = {
57 |   text: PropTypes.any.isRequired,
58 |   size: PropTypes.any.isRequired,
59 |   seed: PropTypes.number,
60 |   color: PropTypes.any,
61 |   single: PropTypes.bool,
62 |   saturation: PropTypes.string,
63 |   brightness: PropTypes.string
64 | };
65 | 
66 | Initicon.defaultProps = defaultProps;
67 | 
68 | if (typeof module != 'undefined') {
69 |   module.exports = Initicon;
70 | }


--------------------------------------------------------------------------------
/initicon.min.js:
--------------------------------------------------------------------------------
1 | "use strict";function getBackgroundColor(props){var seed=props.seed,saturation=props.saturation,brightness=props.brightness,color=props.color;if(color)return color;var hue=Math.sin(seed);return hue=hue<0?-hue:hue,"hsl("+(hue=Math.round(359*hue)+1)+","+saturation+","+brightness+")"}function getFontSize(props){return props.single?props.size/1.7:(props.size-5)/2}function getInitials(props){var text=props.text,single=props.single;return null!==text&&"object"===(void 0===text?"undefined":_typeof(text))?text:text.indexOf(" ")>0&&!single?text.split(" ")[0].charAt(0)+text.split(" ")[1].charAt(0):text.charAt(0)}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(self,call){if(!self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!call||"object"!=typeof call&&"function"!=typeof call?self:call}function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:!1,writable:!0,configurable:!0}}),superClass&&(Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass)}var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj},defaultProps={size:75,saturation:"80%",brightness:"40%",color:!1,single:!1};"undefined"!=typeof exports&&(exports.getBackgroundColor=getBackgroundColor,exports.getFontSize=getFontSize,exports.getInitials=getInitials,exports.defaultProps=defaultProps);var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();if("undefined"!=typeof require)var React=require("react"),_require=require("./shared"),getBackgroundColor=_require.getBackgroundColor,getFontSize=_require.getFontSize,getInitials=_require.getInitials,defaultProps=_require.defaultProps,PropTypes=require("prop-types");var Initicon=function(_React$Component){function Initicon(){return _classCallCheck(this,Initicon),_possibleConstructorReturn(this,(Initicon.__proto__||Object.getPrototypeOf(Initicon)).apply(this,arguments))}return _inherits(Initicon,_React$Component),_createClass(Initicon,[{key:"render",value:function(){var props=this.props;return React.createElement("div",{style:{backgroundColor:getBackgroundColor(props),height:this.props.size+"px",width:this.props.size+"px",fontSize:getFontSize(props)+"px",lineHeight:this.props.size+"px",borderRadius:"50%",display:"inline-block",textAlign:"center",color:"#ffffff"}},getInitials(props))}}]),Initicon}(React.Component);Initicon.propTypes={text:PropTypes.any.isRequired,size:PropTypes.any.isRequired,seed:PropTypes.number,color:PropTypes.any,single:PropTypes.bool,saturation:PropTypes.string,brightness:PropTypes.string},Initicon.defaultProps=defaultProps,"undefined"!=typeof module&&(module.exports=Initicon);


--------------------------------------------------------------------------------
/native.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 4 | 
 5 | var _react = require('react');
 6 | 
 7 | var _react2 = _interopRequireDefault(_react);
 8 | 
 9 | var _reactNative = require('react-native');
10 | 
11 | var _propTypes = require('prop-types');
12 | 
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
14 | 
15 | var _shared = require('./shared');
16 | 
17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18 | 
19 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
20 | 
21 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
22 | 
23 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
24 | 
25 | var NativeIniticon = function (_Component) {
26 |   _inherits(NativeIniticon, _Component);
27 | 
28 |   function NativeIniticon() {
29 |     _classCallCheck(this, NativeIniticon);
30 | 
31 |     return _possibleConstructorReturn(this, (NativeIniticon.__proto__ || Object.getPrototypeOf(NativeIniticon)).apply(this, arguments));
32 |   }
33 | 
34 |   _createClass(NativeIniticon, [{
35 |     key: 'render',
36 |     value: function render() {
37 |       var props = this.props;
38 | 
39 |       return _react2.default.createElement(
40 |         _reactNative.View,
41 |         { style: [styles.icon, {
42 |             backgroundColor: (0, _shared.getBackgroundColor)(props),
43 |             height: this.props.size,
44 |             width: this.props.size,
45 |             borderRadius: this.props.size / 2
46 |           }, this.props.style]
47 |         },
48 |         _react2.default.createElement(
49 |           _reactNative.Text,
50 |           { style: [styles.text, { fontSize: (0, _shared.getFontSize)(props) }] },
51 |           (0, _shared.getInitials)(props)
52 |         )
53 |       );
54 |     }
55 |   }]);
56 | 
57 |   return NativeIniticon;
58 | }(_react.Component);
59 | 
60 | ;
61 | 
62 | NativeIniticon.propTypes = {
63 |   text: _propTypes2.default.string.isRequired,
64 |   size: _propTypes2.default.any.isRequired,
65 |   seed: _propTypes2.default.number,
66 |   color: _propTypes2.default.any,
67 |   single: _propTypes2.default.bool,
68 |   saturation: _propTypes2.default.string,
69 |   brightness: _propTypes2.default.string
70 | };
71 | 
72 | NativeIniticon.defaultProps = _shared.defaultProps;
73 | 
74 | var styles = _reactNative.StyleSheet.create({
75 |   icon: {
76 |     flex: 1,
77 |     justifyContent: 'center',
78 |     alignItems: 'center'
79 |   },
80 |   text: {
81 |     color: '#fff'
82 |   }
83 | });
84 | 
85 | module.exports = NativeIniticon;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-initicon",
 3 |   "version": "0.3.0",
 4 |   "description": "A lightweight React library to generate dynamic Initial Icons (similar to Identicons).",
 5 |   "main": "lib",
 6 |   "scripts": {
 7 |     "build": "babel -d ./ src --presets es2015,react,stage-0 && uglifyjs shared.js index.js --compress -o initicon.min.js"
 8 |   },
 9 |   "author": {
10 |     "name": "Brad Bumbalough",
11 |     "email": "bradley.bumbalough@gmail.com"
12 |   },
13 |   "contributors": [
14 |     {
15 |       "name": "Michael Hirsch",
16 |       "email": "michael@hirsch.me"
17 |     },
18 |     {
19 |       "name": "Calvin Mikael",
20 |       "email": "calvinmikael@gmail.com"
21 |     }
22 |   ],
23 |   "license": "MIT",
24 |   "devDependencies": {
25 |     "babel-cli": "^6.10.1",
26 |     "babel-preset-es2015": "^6.9.0",
27 |     "babel-preset-react": "^6.11.1",
28 |     "babel-preset-stage-0": "^6.5.0",
29 |     "browserify": "^13.0.1",
30 |     "concat-cli": "^4.0.0",
31 |     "uglify-js": "^2.6.4",
32 |     "uglifyjs": "^2.4.10"
33 |   },
34 |   "keywords": [
35 |     "react",
36 |     "react-native",
37 |     "identicon",
38 |     "icon"
39 |   ],
40 |   "repository": {
41 |     "type": "git",
42 |     "url": "git+https://github.com/ccm-innovation/react-initicon.git"
43 |   },
44 |   "bugs": {
45 |     "url": "https://github.com/ccm-innovation/react-initicon/issues"
46 |   },
47 |   "homepage": "https://github.com/ccm-innovation/react-initicon#readme"
48 | }
49 | 


--------------------------------------------------------------------------------
/shared.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 4 | 
 5 | function getBackgroundColor(props) {
 6 |   var seed = props.seed,
 7 |       saturation = props.saturation,
 8 |       brightness = props.brightness,
 9 |       color = props.color;
10 | 
11 |   if (color) return color;
12 |   var hue = Math.sin(seed);
13 |   hue = hue < 0 ? -hue : hue;
14 |   hue = Math.round(hue * 359) + 1;
15 |   return "hsl(" + hue + "," + saturation + "," + brightness + ")";
16 | }
17 | 
18 | function getFontSize(props) {
19 |   var single = props.single;
20 | 
21 |   return single ? props.size / 1.7 : (props.size - 5) / 2;
22 | }
23 | 
24 | function getInitials(props) {
25 |   var text = props.text,
26 |       single = props.single;
27 | 
28 |   if (text !== null && (typeof text === "undefined" ? "undefined" : _typeof(text)) === 'object') {
29 |     return text;
30 |   } else if (text.indexOf(" ") > 0 && !single) {
31 |     return text.split(" ")[0].charAt(0) + text.split(" ")[1].charAt(0);
32 |   } else {
33 |     return text.charAt(0);
34 |   }
35 | }
36 | 
37 | var defaultProps = {
38 |   size: 75,
39 |   saturation: "80%",
40 |   brightness: "40%",
41 |   color: false,
42 |   single: false
43 | };
44 | 
45 | if (typeof exports != 'undefined') {
46 |   exports.getBackgroundColor = getBackgroundColor;
47 |   exports.getFontSize = getFontSize;
48 |   exports.getInitials = getInitials;
49 |   exports.defaultProps = defaultProps;
50 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | if (typeof require != 'undefined') {
 2 |   var React = require('react')
 3 | 
 4 |   var {
 5 |     getBackgroundColor,
 6 |     getFontSize,
 7 |     getInitials,
 8 |     defaultProps
 9 |   } = require('./shared')
10 |   var PropTypes = require('prop-types');
11 | }
12 | 
13 | class Initicon extends React.Component {
14 |   render() {
15 |     let {props} = this
16 |     return (
17 |       <div style={{ backgroundColor: getBackgroundColor(props),
18 |                     height: this.props.size + "px",
19 |                     width: this.props.size + "px",
20 |                     fontSize: getFontSize(props) + "px",
21 |                     lineHeight: this.props.size + "px",
22 |                     borderRadius: '50%',
23 |                     display: 'inline-block',
24 |                     textAlign: 'center',
25 |                     color: '#ffffff' }}>
26 |         {getInitials(props)}
27 |       </div>
28 |     )
29 |   }
30 | }
31 | 
32 | Initicon.propTypes = {
33 |   text: PropTypes.any.isRequired,
34 |   size: PropTypes.any.isRequired,
35 |   seed: PropTypes.number,
36 |   color: PropTypes.any,
37 |   single: PropTypes.bool,
38 |   saturation: PropTypes.string,
39 |   brightness: PropTypes.string
40 | }
41 | 
42 | Initicon.defaultProps = defaultProps
43 | 
44 | if (typeof module != 'undefined') {
45 |   module.exports = Initicon;
46 | }
47 | 


--------------------------------------------------------------------------------
/src/native.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | import {
 3 |   StyleSheet,
 4 |   Text,
 5 |   View,
 6 | } from 'react-native';
 7 | import PropTypes from 'prop-types';
 8 | 
 9 | import {
10 |   getBackgroundColor,
11 |   getFontSize,
12 |   getInitials,
13 |   defaultProps,
14 | } from './shared';
15 | 
16 | class NativeIniticon extends Component {
17 |   render() {
18 |     let {props} = this
19 |     return (
20 |       <View style={[styles.icon, {
21 |                     backgroundColor: getBackgroundColor(props),
22 |                     height: this.props.size,
23 |                     width: this.props.size,
24 |                     borderRadius: this.props.size/2
25 |                   },
26 |                   this.props.style]}
27 |       >
28 |         <Text style={[styles.text, {fontSize: getFontSize(props)}]}>{getInitials(props)}</Text>
29 |       </View>
30 |     );
31 |   }
32 | };
33 | 
34 | NativeIniticon.propTypes = {
35 |   text: PropTypes.string.isRequired,
36 |   size: PropTypes.any.isRequired,
37 |   seed: PropTypes.number,
38 |   color: PropTypes.any,
39 |   single: PropTypes.bool,
40 |   saturation: PropTypes.string,
41 |   brightness: PropTypes.string,
42 | }
43 | 
44 | NativeIniticon.defaultProps = defaultProps;
45 | 
46 | const styles = StyleSheet.create({
47 |   icon: {
48 |     flex: 1,
49 |     justifyContent: 'center',
50 |     alignItems: 'center',
51 |   },
52 |   text: {
53 |     color: '#fff',
54 |   },
55 | })
56 | 
57 | module.exports = NativeIniticon;
58 | 


--------------------------------------------------------------------------------
/src/shared.js:
--------------------------------------------------------------------------------
 1 | function getBackgroundColor(props) {
 2 |   let {seed, saturation, brightness, color} = props
 3 |   if (color) return color
 4 |   var hue = Math.sin(seed)
 5 |   hue = hue < 0 ? -hue : hue
 6 |   hue = Math.round(hue * 359) + 1
 7 |   return "hsl(" + hue + "," + saturation + "," + brightness + ")"
 8 | }
 9 | 
10 | function getFontSize(props) {
11 |   let {single} = props
12 |   return single ? (props.size)/1.7 : (props.size-5)/2
13 | }
14 | 
15 | function getInitials(props) {
16 |   let {text, single} = props
17 |   if (text !== null && typeof text === 'object') {
18 |     return text;
19 |   } else if (text.indexOf(" ") > 0 && !single) {
20 |     return text.split(" ")[0].charAt(0) + text.split(" ")[1].charAt(0)
21 |   } else {
22 |     return text.charAt(0)
23 |   }
24 | }
25 | 
26 | var defaultProps = {
27 |   size: 75,
28 |   saturation: "80%",
29 |   brightness: "40%",
30 |   color: false,
31 |   single: false
32 | }
33 | 
34 | if (typeof exports != 'undefined') {
35 |   exports.getBackgroundColor = getBackgroundColor;
36 |   exports.getFontSize = getFontSize;
37 |   exports.getInitials = getInitials;
38 |   exports.defaultProps = defaultProps;
39 | }
40 | 


--------------------------------------------------------------------------------