├── .babelrc
├── .gitignore
├── .npmignore
├── README.md
├── index.js
├── package.json
└── test
    ├── helpers
        └── pass-context.js
    └── index.test.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     "react"
 4 |   ],
 5 |   "plugins": [
 6 |     "transform-object-rest-spread"
 7 |   ],
 8 | 
 9 |   "env": {
10 |     "development": {
11 |       "presets": [
12 |         ["env", {
13 |           "modules": "commonjs"
14 |         }]
15 |       ],
16 |       "plugins": [
17 |         "add-module-exports"
18 |       ]
19 |     },
20 |     "es": {
21 |       "presets": [
22 |         ["env", {
23 |           "modules": false
24 |         }]
25 |       ]
26 |     }
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib
3 | dist
4 | es
5 | 
6 | .idea
7 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .babelrc
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## react-icon-base
 2 | 
 3 | [![npm][npm-image]][npm-url]
 4 | 
 5 | [npm-image]: https://img.shields.io/npm/v/react-icon-base.svg?style=flat-square
 6 | [npm-url]: https://www.npmjs.com/package/react-icon-base
 7 | 
 8 | base element for [react-icons](https://github.com/gorangajic/react-icons)
 9 | 
10 | ### Installation
11 | 
12 | ```
13 | npm install react-icon-base --save
14 | ```
15 | 
16 | 
17 | ### Usage
18 | 
19 | ```js
20 | import React from 'react'
21 | import IconBase from 'react-icon-base'
22 | 
23 | export default class FaHeart extends React.Component {
24 |     render() {
25 |         return (
26 |             <IconBase viewBox="0 0 1792 1896.0833" {...this.props}>
27 |                 <g><path d="m896 1664q-26 0-44-18l-624-602q-10-8-27.5-26t-55.5-65.5-68-97.5-53.5-121-23.5-138q0-220 127-344t351-124q62 0 126.5 21.5t120 58 95.5 68.5 76 68q36-36 76-68t95.5-68.5 120-58 126.5-21.5q224 0 351 124t127 344q0 221-229 450l-623 600q-18 18-44 18z"/></g>
28 |             </IconBase>
29 |         )
30 |     }
31 | }
32 | ```
33 | 
34 | ### Configuration
35 | You can configure react-icon-base props in context.
36 | 
37 | ```js
38 | class HigherOrderComponent extends Component {
39 | 
40 |     static childContextTypes = {
41 |         reactIconBase: PropTypes.object
42 |     };
43 | 
44 |     getChildContext() {
45 |         return {
46 |             reactIconBase: {
47 |                 color: 'tomato',
48 |                 size: 24,
49 |                 style: {
50 |                     ...
51 |                 }
52 |             }
53 |         }
54 |     }
55 | 
56 |     render() {
57 |         ...
58 |     }
59 | }
60 | ```
61 | 
62 | Context can be overriden inline, like so:
63 | 
64 | ```js
65 | <Icon size={30} color='aliceblue' style={{ ... }} />
66 | ```
67 | 
68 | ### Licence
69 | 
70 | MIT
71 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | const IconBase = ({ children, color, size, style = {}, width, height, ...props }, { reactIconBase = {} }) => {
 5 |   const computedSize = size || reactIconBase.size || '1em'
 6 | 
 7 |   const baseStyle = reactIconBase.style || {}
 8 |   const styleProp = {
 9 |     verticalAlign: 'middle',
10 |     ...baseStyle,
11 |     ...style
12 |   }
13 | 
14 |   const computedColor = color || style.color || reactIconBase.color || baseStyle.color
15 |   if (computedColor) {
16 |     styleProp.color = computedColor
17 |   }
18 | 
19 |   return (
20 |     <svg
21 |       children={children}
22 |       fill='currentColor'
23 |       preserveAspectRatio='xMidYMid meet'
24 |       height={height || computedSize}
25 |       width={width || computedSize}
26 |       {...reactIconBase}
27 |       {...props}
28 |       style={styleProp}
29 |     />
30 |   )
31 | }
32 | 
33 | IconBase.propTypes = {
34 |   color: PropTypes.string,
35 |   size: PropTypes.oneOfType([
36 |     PropTypes.string,
37 |     PropTypes.number
38 |   ]),
39 |   width: PropTypes.oneOfType([
40 |     PropTypes.string,
41 |     PropTypes.number
42 |   ]),
43 |   height: PropTypes.oneOfType([
44 |     PropTypes.string,
45 |     PropTypes.number
46 |   ]),
47 |   style: PropTypes.object
48 | }
49 | 
50 | IconBase.contextTypes = {
51 |   reactIconBase: PropTypes.shape(IconBase.propTypes)
52 | }
53 | 
54 | export default IconBase
55 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-icon-base",
 3 |   "version": "2.1.2",
 4 |   "description": "base element for react-icons",
 5 |   "main": "lib/index.js",
 6 |   "module": "es/index.js",
 7 |   "scripts": {
 8 |     "lint": "standard",
 9 |     "build": "npm run build:cjs && npm run build:es",
10 |     "build:cjs": "babel index.js --out-dir lib",
11 |     "build:es": "BABEL_ENV=es babel index.js --out-dir es",
12 |     "prepublish": "npm test && npm run build",
13 |     "test": "npm run lint && mocha test --compilers js:babel-register"
14 |   },
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "git+ssh://git@github.com/gorangajic/react-icon-base.git"
18 |   },
19 |   "keywords": [
20 |     "react",
21 |     "icon",
22 |     "base"
23 |   ],
24 |   "author": "Goran Gajic <fero.null@gmail.com>",
25 |   "license": "MIT",
26 |   "bugs": {
27 |     "url": "https://github.com/gorangajic/react-icon-base/issues"
28 |   },
29 |   "homepage": "https://github.com/gorangajic/react-icon-base#readme",
30 |   "devDependencies": {
31 |     "babel-cli": "^6.26.0",
32 |     "babel-eslint": "^6.1.2",
33 |     "babel-plugin-add-module-exports": "^0.2.1",
34 |     "babel-plugin-transform-object-rest-spread": "^6.26.0",
35 |     "babel-preset-env": "^1.6.1",
36 |     "babel-preset-react": "^6.24.1",
37 |     "commitizen": "^2.8.2",
38 |     "cz-conventional-changelog": "^1.1.6",
39 |     "expect": "^1.20.2",
40 |     "ghooks": "^1.3.2",
41 |     "mocha": "^2.5.3",
42 |     "prop-types": "*",
43 |     "react": "^16.2.0",
44 |     "react-test-renderer": "^16.2.0",
45 |     "standard": "^7.1.2",
46 |     "validate-commit-msg": "^2.6.1"
47 |   },
48 |   "peerDependencies": {
49 |     "react": "*"
50 |   },
51 |   "standard": {
52 |     "globals": [
53 |       "beforeEach",
54 |       "describe",
55 |       "it"
56 |     ],
57 |     "parser": "babel-eslint"
58 |   },
59 |   "config": {
60 |     "ghooks": {
61 |       "commit-msg": "validate-commit-msg"
62 |     },
63 |     "commitizen": {
64 |       "path": "./node_modules/cz-conventional-changelog"
65 |     },
66 |     "validate-commit-msg": {
67 |       "types": [
68 |         "issue",
69 |         "master",
70 |         "revert"
71 |       ],
72 |       "warnOnFail": false,
73 |       "maxSubjectLength": 100,
74 |       "subjectPattern": ".+",
75 |       "subjectPatternErrorMsg": "subject does not match subject pattern!",
76 |       "helpMessage": ""
77 |     }
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/test/helpers/pass-context.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | class PassContext extends React.Component {
 5 |   getChildContext () {
 6 |     return {
 7 |       reactIconBase: this.props.context
 8 |     }
 9 |   }
10 | 
11 |   render () {
12 |     return React.Children.only(this.props.children)
13 |   }
14 | }
15 | 
16 | PassContext.propTypes = {
17 |   children: PropTypes.node.isRequired
18 | }
19 | 
20 | PassContext.childContextTypes = {
21 |   reactIconBase: PropTypes.object.isRequired
22 | }
23 | 
24 | export default PassContext
25 | 


--------------------------------------------------------------------------------
/test/index.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactTestRenderer from 'react-test-renderer'
 3 | import expect from 'expect'
 4 | import IconBase from '..'
 5 | import PassContext from './helpers/pass-context'
 6 | 
 7 | describe('IconBase', () => {
 8 |   let outer
 9 | 
10 |   beforeEach(() => {
11 |     const renderer = ReactTestRenderer.create(<IconBase />)
12 |     outer = renderer.toJSON()
13 |   })
14 | 
15 |   it('renders svg', () => {
16 |     expect(outer.type).toEqual('svg')
17 |   })
18 | 
19 |   it('has default props', () => {
20 |     expect(outer.props.fill).toEqual('currentColor')
21 |     expect(outer.props.preserveAspectRatio).toEqual('xMidYMid meet')
22 |     expect(outer.props.height).toEqual('1em')
23 |     expect(outer.props.width).toEqual('1em')
24 |     expect(outer.props.style.verticalAlign).toEqual('middle')
25 |   })
26 | 
27 |   it('has does not have a default color', () => {
28 |     expect(Object.prototype.hasOwnProperty.call(outer.props.style), 'color').toBe(false)
29 |   })
30 | })
31 | 
32 | describe('Colors priority', () => {
33 |   it('uses the reactIconBase.style.color first', () => {
34 |     const rendered = ReactTestRenderer.create((
35 |       <PassContext context={{ style: { color: 'red' } }}>
36 |         <IconBase />
37 |       </PassContext>
38 |     ))
39 | 
40 |     expect(rendered.toJSON().props.style.color).toEqual('red')
41 |   })
42 | 
43 |   it('uses the reactIconBase.color second', () => {
44 |     const rendered = ReactTestRenderer.create((
45 |       <PassContext context={{ style: { color: 'red' }, color: 'blue' }}>
46 |         <IconBase />
47 |       </PassContext>
48 |     ))
49 | 
50 |     expect(rendered.toJSON().props.style.color).toEqual('blue')
51 |   })
52 | 
53 |   it('uses style.color third', () => {
54 |     const rendered = ReactTestRenderer.create((
55 |       <PassContext context={{ style: { color: 'red' }, color: 'blue' }}>
56 |         <IconBase style={{ color: 'purple' }} />
57 |       </PassContext>
58 |     ))
59 | 
60 |     expect(rendered.toJSON().props.style.color).toEqual('purple')
61 |   })
62 | 
63 |   it('uses color fourth', () => {
64 |     const rendered = ReactTestRenderer.create((
65 |       <PassContext context={{ style: { color: 'red' }, color: 'blue' }}>
66 |         <IconBase style={{ color: 'purple' }} color='orange' />
67 |       </PassContext>
68 |     ))
69 | 
70 |     expect(rendered.toJSON().props.style.color).toEqual('orange')
71 |   })
72 | })
73 | 


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