Extract Font Awesome icons into CSS

Resolves #2.

Author: jakezatecky

CHANGELOG.md

@@ -6,6 +6,10 @@
 
 * [#20]: Remove deprecated `title` property in `nodes` (use `label` instead)
 
+### New Features
+
+* [#2]: Allow customization of icons via CSS
+
 ## [v0.4.2](https://github.com/jakezatecky/react-checkbox-tree/compare/v0.4.1...v0.4.2) (2016-02-27)
 
 ### Bug Fixes

src/js/TreeNode.js

@@ -58,17 +58,17 @@ class TreeNode extends React.Component {
 
 	renderCollapseIcon() {
 		if (!this.props.expanded) {
-			return <i className="fa fa-chevron-right" />;
+			return <i className="rct-icon rct-icon-expand-close" />;
 		}
 
-		return <i className="fa fa-chevron-down" />;
+		return <i className="rct-icon rct-icon-expand-open" />;
 	}
 
 	renderCollapseButton() {
 		if (this.props.rawChildren === null) {
 			return (
 				<span className="rct-collapse">
-					<i className="fa" />
+					<i className="rct-icon" />
 				</span>
 			);
 		}
@@ -82,26 +82,26 @@ class TreeNode extends React.Component {
 
 	renderCheckboxIcon() {
 		if (this.props.checked === 0) {
-			return <i className="fa fa-square-o" />;
+			return <i className="rct-icon rct-icon-uncheck" />;
 		}
 
 		if (this.props.checked === 1) {
-			return <i className="fa fa-check-square-o" />;
+			return <i className="rct-icon rct-icon-check" />;
 		}
 
-		return <i className="fa fa-check-square-o rct-half-checked" />;
+		return <i className="rct-icon rct-icon-half-check" />;
 	}
 
 	renderNodeIcon() {
 		if (this.props.rawChildren === null) {
-			return <i className="fa fa-file-o" />;
+			return <i className="rct-icon rct-icon-leaf" />;
 		}
 
 		if (!this.props.expanded) {
-			return <i className="fa fa-folder-o" />;
+			return <i className="rct-icon rct-icon-parent-close" />;
 		}
 
-		return <i className="fa fa-folder-open-o" />;
+		return <i className="rct-icon rct-icon-parent-open" />;
 	}
 
 	renderChildren() {
@@ -125,7 +125,7 @@ class TreeNode extends React.Component {
 						<span className="rct-checkbox">
 							{this.renderCheckboxIcon()}
 						</span>
-						<span className="rct-icon">
+						<span className="rct-node-icon">
 							{this.renderNodeIcon()}
 						</span>
 						<span className="rct-title">

src/less/react-checkbox-tree.less

@@ -36,15 +36,12 @@
     display: none;
   }
 
-  .fa {
+  .rct-icon {
+    display: inline-block;
     margin: 0 5px;
     width: 14px;
-  }
-
-  .fa-folder-open-o,
-  .fa-folder-o,
-  .fa-file-o {
-    color: @rct-icon-color;
+    font-family: "FontAwesome";
+    font-style: normal;
   }
 }
 
@@ -65,12 +62,7 @@
     cursor: pointer;
   }
 
-  .fa-chevron-right,
-  .fa-chevron-down {
-    text-align: center;
-  }
-
-  > .fa-chevron-right {
+  > .rct-icon-expand-close {
     opacity: .5;
 
     &:hover {
@@ -79,6 +71,39 @@
   }
 }
 
-.rct-half-checked {
+.rct-node-icon {
+  color: @rct-icon-color;
+}
+
+.rct-icon-expand-close::before {
+  content: "\f054";
+}
+
+.rct-icon-expand-open::before {
+  content: "\f078";
+}
+
+.rct-icon-uncheck::before {
+  content: "\f096";
+}
+
+.rct-icon-check::before {
+  content: "\f046";
+}
+
+.rct-icon-half-check::before {
   opacity: .5;
+  content: "\f046";
+}
+
+.rct-icon-leaf::before {
+  content: "\f016";
+}
+
+.rct-icon-parent-open::before {
+  content: "\f115";
+}
+
+.rct-icon-parent-close::before {
+  content: "\f114";
 }

src/sass/react-checkbox-tree.scss

@@ -36,15 +36,12 @@ $rct-label-hover: rgba($rct-icon-color, .1) !default;
     display: none;
   }
 
-  .fa {
+  .rct-icon {
+    display: inline-block;
     margin: 0 5px;
     width: 14px;
-  }
-
-  .fa-folder-open-o,
-  .fa-folder-o,
-  .fa-file-o {
-    color: $rct-icon-color;
+    font-family: "FontAwesome";
+    font-style: normal;
   }
 }
 
@@ -65,12 +62,7 @@ $rct-label-hover: rgba($rct-icon-color, .1) !default;
     cursor: pointer;
   }
 
-  .fa-chevron-right,
-  .fa-chevron-down {
-    text-align: center;
-  }
-
-  > .fa-chevron-right {
+  > .rct-icon-expand-close {
     opacity: .5;
 
     &:hover {
@@ -79,6 +71,39 @@ $rct-label-hover: rgba($rct-icon-color, .1) !default;
   }
 }
 
-.rct-half-checked {
+.rct-node-icon {
+  color: $rct-icon-color;
+}
+
+.rct-icon-expand-close::before {
+  content: "\f054";
+}
+
+.rct-icon-expand-open::before {
+  content: "\f078";
+}
+
+.rct-icon-uncheck::before {
+  content: "\f096";
+}
+
+.rct-icon-check::before {
+  content: "\f046";
+}
+
+.rct-icon-half-check::before {
   opacity: .5;
+  content: "\f046";
+}
+
+.rct-icon-leaf::before {
+  content: "\f016";
+}
+
+.rct-icon-parent-open::before {
+  content: "\f115";
+}
+
+.rct-icon-parent-close::before {
+  content: "\f114";
 }

test/TreeNode.js

@@ -38,9 +38,9 @@ describe('<TreeNode />', () => {
 	describe('checked', () => {
 		it('should render icons associated with each check state', () => {
 			const iconMap = {
-				0: <i className="fa fa-square-o" />,
-				1: <i className="fa fa-check-square-o" />,
-				2: <i className="fa fa-check-square-o rct-half-checked" />,
+				0: <i className="rct-icon rct-icon-uncheck" />,
+				1: <i className="rct-icon rct-icon-check" />,
+				2: <i className="rct-icon rct-icon-half-check" />,
 			};
 
 			Object.keys(iconMap).forEach((state) => {
@@ -99,17 +99,17 @@ describe('<TreeNode />', () => {
 				<TreeNode {...baseProps} expanded rawChildren={[{ value: 'europa', label: 'Europa' }]} />,
 			);
 
-			assert.isTrue(wrapper.contains(<i className="fa fa-chevron-down" />));
-			assert.isTrue(wrapper.contains(<i className="fa fa-folder-open-o" />));
+			assert.isTrue(wrapper.contains(<i className="rct-icon rct-icon-expand-open" />));
+			assert.isTrue(wrapper.contains(<i className="rct-icon rct-icon-parent-open" />));
 		});
 
 		it('should render collapsed icons when set to false', () => {
 			const wrapper = shallow(
 				<TreeNode {...baseProps} expanded={false} rawChildren={[{ value: 'europa', label: 'Europa' }]} />,
 			);
 
-			assert.isTrue(wrapper.contains(<i className="fa fa-chevron-right" />));
-			assert.isTrue(wrapper.contains(<i className="fa fa-folder-o" />));
+			assert.isTrue(wrapper.contains(<i className="rct-icon rct-icon-expand-close" />));
+			assert.isTrue(wrapper.contains(<i className="rct-icon rct-icon-parent-close" />));
 		});
 	});