├── .gitignore ├── src ├── index.js ├── __tests__ │ ├── index.js │ └── Icon.js └── Icon.js ├── lib ├── index.js ├── __tests__ │ ├── index.js │ └── Icon.js └── Icon.js ├── tasks └── icons.js ├── README.md └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Icon from './Icon'; 2 | 3 | module.exports = Icon; 4 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; }; 4 | 5 | var Icon = _interopRequire(require("./Icon")); 6 | 7 | module.exports = Icon; -------------------------------------------------------------------------------- /src/__tests__/index.js: -------------------------------------------------------------------------------- 1 | jest.dontMock('../index'); 2 | 3 | import Icon from '../'; 4 | 5 | describe('lib', () => { 6 | it('exposes the `Icon` component', () => { 7 | expect(Icon).toBeDefined(); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /lib/__tests__/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; }; 4 | 5 | jest.dontMock("../index"); 6 | 7 | var Icon = _interopRequire(require("../")); 8 | 9 | describe("lib", function () { 10 | it("exposes the `Icon` component", function () { 11 | expect(Icon).toBeDefined(); 12 | }); 13 | }); -------------------------------------------------------------------------------- /tasks/icons.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var inject = require('gulp-inject-string'); 3 | var evil = require('evil-icons'); 4 | 5 | /** 6 | * htmlSrc index.html file 7 | * dest index.html output 8 | */ 9 | function evilIconsSprite(htmlSrc, dest) { 10 | return gulp.src(htmlSrc) 11 | .pipe(inject.after('', evil.sprite)) 12 | .pipe(gulp.dest(dest)); 13 | } 14 | 15 | module.exports = evilIconsSprite; 16 | -------------------------------------------------------------------------------- /src/__tests__/Icon.js: -------------------------------------------------------------------------------- 1 | jest.dontMock('../Icon'); 2 | 3 | import TestUtils from 'react-dom/test-utils'; 4 | import Icon from '../Icon'; 5 | 6 | describe('Icon', () => { 7 | it('renders an svg by default', () => { 8 | let doc = TestUtils.renderIntoDocument(); 9 | let el = TestUtils.findRenderedDOMComponentWithTag(doc, 'svg'); 10 | expect(el).toBeDefined(); 11 | }); 12 | 13 | it('adds the `icon--ei-eye icon--s` class if the `name` property is set to `ei-eye` and the `size` property is set to `s`', function() { 14 | let doc = TestUtils.renderIntoDocument(); 15 | let el = TestUtils.findRenderedDOMComponentWithTag(doc, 'div'); 16 | expect(el.getDOMNode().className).toBe('icon icon--ei-eye icon--s'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Evil Icons 2 | 3 | React components for the excellent http://evil-icons.io/ 4 | 5 | ## A React component for the Icons 6 | 7 | ```html 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 | 20 | 21 | ``` 22 | 23 | ```javascript 24 | 25 | var React = require('react'); 26 | var Icon = require('react-evil-icons'); 27 | 28 | React.render( 29 | , 30 | document.getElementById('app') 31 | ); 32 | 33 | ``` 34 | 35 | ## A gulp task to write the icon sprite into the HTML 36 | 37 | ```javascript 38 | 39 | var evilIconSprite = require('./node_modules/react-evil-icons/tasks/icons'); 40 | 41 | evilIconSprite('./src/index.html', './_site') 42 | 43 | ``` 44 | -------------------------------------------------------------------------------- /src/Icon.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var PropTypes = require('prop-types'); 3 | 4 | Icon.propTypes = { 5 | size: PropTypes.string.isRequired, 6 | name: PropTypes.string.isRequired, 7 | className: PropTypes.string 8 | } 9 | 10 | function Icon (props) { 11 | 12 | var size = props.size ? " icon--" + props.size : ""; 13 | var className = props.className ? " " + props.className : ""; 14 | var klass = "icon icon--" + props.name + size + className; 15 | 16 | var name = '#'+ props.name + '-icon'; 17 | var Icon = ( 18 | 21 | ); 22 | return ( 23 |

24 | {wrapSpinner(Icon, klass)} 25 |

26 | ); 27 | 28 | function wrapSpinner (jsx, klass) { 29 | if (klass.indexOf("spinner") > -1) { 30 | return ( 31 |

{jsx}

32 | ); 33 | } 34 | return jsx; 35 | } 36 | } 37 | 38 | module.exports = Icon; 39 | -------------------------------------------------------------------------------- /lib/__tests__/Icon.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; }; 4 | 5 | jest.dontMock("../Icon"); 6 | 7 | var React = _interopRequire(require("react")); 8 | var ReactDOM = _interopRequire(require("react-dom")); 9 | var TestUtils = _interopRequire(require("react-dom/test-utils")); 10 | 11 | var Icon = _interopRequire(require("../Icon")); 12 | 13 | describe("Icon", function () { 14 | it("renders an svg by default", function () { 15 | var doc = TestUtils.renderIntoDocument(React.createElement(Icon, { name: "ei-eye", size: "s" })); 16 | var el = TestUtils.findRenderedDOMComponentWithTag(doc, "svg"); 17 | expect(el).toBeDefined(); 18 | }); 19 | 20 | it("adds the `icon--ei-eye icon--s` class if the `name` property is set to `ei-eye` and the `size` property is set to `s`", function () { 21 | var doc = TestUtils.renderIntoDocument(React.createElement(Icon, { name: "ei-eye", size: "s" })); 22 | var el = TestUtils.findRenderedDOMComponentWithTag(doc, "div"); 23 | expect(ReactDOM.findDOMNode(el).className).toBe("icon icon--ei-eye icon--s"); 24 | }); 25 | }); -------------------------------------------------------------------------------- /lib/Icon.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require("react"); 4 | var createReactClass = require("create-react-class"); 5 | var PropTypes = require("prop-types"); 6 | 7 | module.exports = createReactClass({ 8 | displayName: "Icon", 9 | 10 | propTypes: { 11 | size: PropTypes.string.isRequired, 12 | name: PropTypes.string.isRequired, 13 | className: PropTypes.string }, 14 | 15 | render: function render() { 16 | var size = this.props.size ? " icon--" + this.props.size : ""; 17 | var className = this.props.className ? " " + this.props.className : ""; 18 | var klass = "icon icon--" + this.props.name + size + className; 19 | 20 | var name = "#" + this.props.name + "-icon"; 21 | var useTag = ""; 22 | var Icon = React.createElement("svg", { className: "icon__cnt", dangerouslySetInnerHTML: { __html: useTag } }); 23 | return React.createElement( 24 | "div", 25 | { className: klass }, 26 | this.wrapSpinner(Icon, klass) 27 | ); 28 | }, 29 | 30 | wrapSpinner: function wrapSpinner(Html, klass) { 31 | if (klass.indexOf("spinner") > -1) { 32 | return React.createElement( 33 | "div", 34 | { className: "icon__spinner" }, 35 | Html 36 | ); 37 | } else { 38 | return Html; 39 | } 40 | } 41 | 42 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-evil-icons", 3 | "version": "0.4.0", 4 | "description": "React components for Evil Icons", 5 | "main": "lib/index.js", 6 | "scripts": { 7 | "clean": "rm -Rf ./lib", 8 | "compile": "npm run clean && babel --experimental src --out-dir lib", 9 | "watch": "babel --experimental src --watch --out-dir lib", 10 | "test": "jest ./lib", 11 | "start": "npm run compile && npm test", 12 | "onchange": "onchange 'lib/*.js' 'lib/**/*.js' -- npm test", 13 | "dev": "npm run watch & npm run onchange", 14 | "prepublish": "npm ls && npm test" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "https://github.com/saulhoward/react-evil-icons.git" 19 | }, 20 | "keywords": [ 21 | "react-component", 22 | "evil-icons", 23 | "icons", 24 | "svg" 25 | ], 26 | "license": "Apache 2", 27 | "bugs": { 28 | "url": "https://github.com/saulhoward/react-evil-icons/issues" 29 | }, 30 | "homepage": "https://github.com/saulhoward/react-evil-icons", 31 | "dependencies": { 32 | "create-react-class": "^15.6.3", 33 | "evil-icons": "^1.9.0", 34 | "gulp": "^3.9.1", 35 | "gulp-inject-string": "1.1.1", 36 | "prop-types": "^15.6.0", 37 | "react-dom": "^16.2.0" 38 | }, 39 | "devDependencies": { 40 | "babel": "^6.23.0", 41 | "jest-cli": "^22.2.1", 42 | "onchange": "3.3.0", 43 | "react": ">=16.2.0" 44 | }, 45 | "jest": { 46 | "unmockedModulePathPatterns": [ 47 | "/node_modules/react" 48 | ] 49 | } 50 | } 51 | --------------------------------------------------------------------------------