Add favicon link support (#12)

- Add new prop `favicon` to take url to favicon
venmo · Sep 14, 2016 · eb91e43 · eb91e43
1 parent 580b713
commit eb91e43
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@
 
 HTMLDocument is a foundational [React](https://facebook.github.io/react/) component useful for rendering full html documents on the server.
 
-** **  
+** **
 
 You'll love **HTMLDocument** if:
 * You love (or would love) to use React to render full documents on the server without the need for templates, view engines, or static files.
@@ -151,6 +151,7 @@ const state = getUniversalState(); // { user: "X"}
 | `stylesheets` | array | A list of stylesheet in one of three forms: string paths `'mysite.com/styles.css'`, style href objects `{ href: 'mysite.com/styles.css' }` or inline styles `{ inline: 'body { color: '#333' }' }` | `[ ]`
 | `universalState` | object | Contains current server state that will be rendered into a script tag of type `application/json` on the page. Helpful for re-mounting with props on the client in universal apps. When not using it, children will be rendered statically. | `null`
 | `childrenContainerId`           | string | The id for the dom element that contains the children nodes. | `'app'`
+| `favicon` | string | URL to your favicon. | `''`
 | `htmlAttributes` | object | [Attributes](https://facebook.github.io/react/docs/tags-and-attributes.html#supported-attributes) that you'd like to use on the html tag. | `{ }`
 
 
@@ -175,7 +176,7 @@ Please open PRs from your fork to master. Keep in mind that we're using the [esl
 
 
 ### Versioning
-This project adheres to [Semantic Versioning](http://semver.org/).  
+This project adheres to [Semantic Versioning](http://semver.org/).
 
 
 ### License

diff --git a/dist/HTMLDocument.js b/dist/HTMLDocument.js
@@ -52,6 +52,14 @@ var HTMLDocument = (function (_Component) {
       var childrenHTML = { __html: markup };
       return _react2['default'].createElement('div', { key: childrenContainerId, id: childrenContainerId, dangerouslySetInnerHTML: childrenHTML });
     }
+  }, {
+    key: 'renderFavicon',
+    value: function renderFavicon() {
+      var favicon = this.props.favicon;
+
+      if (!favicon) return null;
+      return _react2['default'].createElement('link', { rel: 'icon', href: favicon });
+    }
   }, {
     key: 'renderMetatags',
     value: function renderMetatags() {
@@ -139,6 +147,7 @@ var HTMLDocument = (function (_Component) {
             this.props.title
           ),
           this.renderMetatags(),
+          this.renderFavicon(),
           this.renderStylesheets()
         ),
         _react2['default'].createElement(
@@ -159,6 +168,7 @@ HTMLDocument.propTypes = {
   childrenContainerId: _react.PropTypes.string,
   children: _react.PropTypes.node,
   htmlAttributes: _react.PropTypes.object,
+  favicon: _react.PropTypes.string,
   metatags: _react.PropTypes.array,
   scripts: _react.PropTypes.array,
   stylesheets: _react.PropTypes.array,
@@ -169,6 +179,7 @@ HTMLDocument.propTypes = {
 HTMLDocument.defaultProps = {
   childrenContainerId: 'app',
   htmlAttributes: {},
+  favicon: '',
   metatags: [],
   scripts: [],
   stylesheets: [],

diff --git a/src/HTMLDocument.jsx b/src/HTMLDocument.jsx
@@ -19,6 +19,12 @@ class HTMLDocument extends Component {
     );
   }
 
+  renderFavicon() {
+    const { favicon } = this.props;
+    if (!favicon) return null;
+    return <link rel="icon" href={favicon} />;
+  }
+
   renderMetatags() {
     const { metatags } = this.props;
     return metatags.map((props, index) => <meta key={index} {...props} />);
@@ -80,6 +86,7 @@ class HTMLDocument extends Component {
         <head>
           <title>{this.props.title}</title>
           {this.renderMetatags()}
+          {this.renderFavicon()}
           {this.renderStylesheets()}
         </head>
         <body>
@@ -96,6 +103,7 @@ HTMLDocument.propTypes = {
   childrenContainerId: PropTypes.string,
   children: PropTypes.node,
   htmlAttributes: PropTypes.object,
+  favicon: PropTypes.string,
   metatags: PropTypes.array,
   scripts: PropTypes.array,
   stylesheets: PropTypes.array,
@@ -106,6 +114,7 @@ HTMLDocument.propTypes = {
 HTMLDocument.defaultProps = {
   childrenContainerId: 'app',
   htmlAttributes: {},
+  favicon: '',
   metatags: [],
   scripts: [],
   stylesheets: [],

diff --git a/test/HTMLDocument.spec.js b/test/HTMLDocument.spec.js
@@ -34,6 +34,17 @@ describe('HTMLDocument', () => {
     expect(qs('html').attr('lang')).to.equal(props.htmlAttributes.lang);
   });
 
+  it('should render favicon link', () => {
+    const props = {
+      favicon: 'path/to/favicon.ico'
+    };
+    const qs = renderAndGetQuerySelector(props);
+    const $links = qs('link');
+    expect($links.length).to.equal(1);
+    expect($links.attr('rel')).to.equal('icon');
+    expect($links.attr('href')).to.equal(props.favicon);
+  });
+
   describe('Metatags', () => {
     it('should render metatags', () => {
       const props = {