Add support for react-icons

docs/intro.md

@@ -10,4 +10,4 @@ import { AlertList, Alert, AlertContainer } from "react-bs-notifier";
 
 This package exports three components, `AlertList`, `Alert`, & `AlertContainer`. Depending on your use-case, one or a combination of these components might work better for you.
 
-These components makes use of [Bootstrap](https://getbootstrap.com/) & [Font Awesome](http://fontawesome.io/), but do not take direct dependencies on either. It assumes the CSS classes are available (e.g. just include the stylesheets). If bootstrap isn't available, the component won't look like much. If font awesome isn't available, it just won't add the icons to the alerts.
+These components makes use of [Bootstrap](https://getbootstrap.com/) & either [Font Awesome](http://fontawesome.io/) or [React Icons](https://www.npmjs.com/package/react-icons), but do not take direct dependencies on either. It assumes the CSS classes are available for Font Awesome (e.g. just include the stylesheets), or that the React Icons module has been added to your project. If bootstrap isn't available, the component won't look like much. If Font Awesome or React Icons isn't available, it just won't add the icons to the alerts.

package.json

@@ -61,5 +61,8 @@
     "style-loader": "0.13.x",
     "webpack": "2.x",
     "webpack-dev-server": "2.x"
+  },
+  "optionalDependencies": {
+    "react-icons": "3.x"
   }
-}
+}

src/alert/icon.jsx

@@ -1,15 +1,54 @@
 import React from "react";
 
+// Import optional react-icons library
+let FontAwesome;
+
+try {
+	FontAwesome = require("react-icons/fa");
+} catch (err) {
+	FontAwesome = false;
+}
+
 const Icon = ({ type, className = "" }) => {
 	const faType = iconType(type);
 
 	if (faType) {
-		return <i className={`${faType} ${className}`} aria-hidden="true" />;
+		if (FontAwesome) {
+			return <ReactIcon type={type} className={className} />;
+		} else {
+			return <i className={`${faType} ${className}`} aria-hidden="true" />;
+		}
 	}
 
 	return null;
 };
 
+const ReactIcon = ({ type, className = "" }) => {
+	const {
+		FaCheck,
+		FaExclamationCircle,
+		FaExclamationTriangle,
+		FaInfo
+	} = FontAwesome;
+
+	switch (type) {
+		case "warning":
+			return <FaExclamationTriangle className={className} aria-hidden="true" />;
+
+		case "info":
+			return <FaInfo className={className} aria-hidden="true" />;
+
+		case "success":
+			return <FaCheck className={className} aria-hidden="true" />;
+
+		case "danger":
+			return <FaExclamationCircle className={className} aria-hidden="true" />;
+
+		default:
+			return null;
+	}
+};
+
 function iconType(type) {
 	switch (type) {
 		case "warning":

src/alert/styles.js

@@ -34,7 +34,7 @@ export default useSheet({
 	icon: {
 		verticalAlign: "top",
 		fontSize: bootstrap.fontSizeH4,
-		paddingRight: bootstrap.paddingLargeHorizontal,
+		marginRight: bootstrap.paddingLargeHorizontal,
 		opacity: 0.2
 	},
 	headline: {

src/container/index.jsx

@@ -11,14 +11,12 @@ const AlertContainer = ({ position = "top-right", children, classes }) => {
 	return (
 		<div className={`${classes.container} ${classes[position]}`}>
 			<TransitionGroup>
-				{Children.map(
-					children,
-					child =>
-						child ? (
-							<AlertTransition key={child.props.id}>
-								{cloneElement(child)}
-							</AlertTransition>
-						) : null
+				{Children.map(children, child =>
+					child ? (
+						<AlertTransition key={child.props.id}>
+							{cloneElement(child)}
+						</AlertTransition>
+					) : null
 				)}
 			</TransitionGroup>
 		</div>