Merge pull request #86 from mickelsonmichael/icon-improvements

Improvements to icons

README.md

@@ -2,13 +2,13 @@
 
 ## What is a SnackBar?
 
-According to [Material Design](https://material.io/design/components/snackbars.html) a Snackbar or Toast provides "brief messages about app processes at the bottom of the screen." 
+According to [Material Design](https://material.io/design/components/snackbars.html) a Snackbar or Toast provides "brief messages about app processes at the bottom of the screen."
 
 Generally, they should not have an icon associated with it and should be only one line on most devices.
 
 While this version of a SnackBar follows the Material Design semantics closely, it strays in several major ways.
 
-1. You can send multiple snackbars to a user at a time, as opposed to a single snackbar at a time. 
+1. You can send multiple snackbars to a user at a time, as opposed to a single snackbar at a time.
 2. The SnackBar appears in the bottom right corner, as opposed to the bottom left or bottom center.
 
 ## Basic Usage
@@ -31,7 +31,7 @@ To customize a SnackBar, pass the function a JS object with any of the following
 | container   | `DOMNode` or `string`| `document.body` | If a string is provided, the string is passed to `querySelector` to find the container|
 | width       | `string`             |                 | Any valid CSS value for `width` |
 | speed       | `string` or `number` |                 | Any valid CSS value for `transition-duration` or a duration in milliseconds |
-| icon        | `string`             |                 | `"exclamation"`, `"danger"`, `"warn"`, `"question"`, `"question-mark"`, `"info"`, `"add"`, `"plus"`, or any single character. Longer strings will be concatenated |
+| icon        | `string`             | `""`            | See [Icons](#icons) |
 
 ### Actions
 
@@ -46,3 +46,21 @@ Actions should be an array of objects matching the format
 ```
 
 At minimum, an action must have a text field, which will simply create a dismiss button with custom text. Alternatively, you can specify a `function` property which defines a custom function to be run once the action is clicked. This can be anything and is passed no parameters. If function is defined but you still want the action click to dismiss the SnackBar, then you can specify `dismiss = true` to indicate that, once your method has run to completion, then the action will be automatically dismissed.
+
+## Icons
+
+In order for icons to be visible, `status` _must_ be set to a non-empty value.
+The `icon` property accepts any string value.
+This values will be truncated to a single character
+(e.g., `"alert"` will be shortened to `"a"`)
+and displayed within the status indicator.
+There are several pre-defined values you can use with friendly names to make them easier to remember:
+
+- `!` -> `"exclamation"`, `"warn"`, or `"danger"`
+- `?` -> `"info"`, `"question"`, or `"question-mark"`
+- `+` -> `"plus"` or `"add"`
+
+Since these are just conveniences,
+you may also simply put provide the value directly
+(e.g. `icon: "?"`)
+to have the same result.

dist/js-snackbar.css

@@ -129,7 +129,9 @@
 }
 
 .js-snackbar__icon {
-    display: block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     border: 2px solid white;
     font-weight: bold;
     border-radius: 20px;