FontAwesome v5.0.6 (#1372)

* Update FontAwesome to v5.0.6

* Adapt DiscussionListItem-count icon to match FontAwesome 5 syntax

* Change icon name to match FontAwesome 5.0.6 fas icon

* Add font type prefix parameter to icon helper

* Add Enable Icon Prefix to show icon in Extension Page

* Fix invalid icon behavior

* Change icon name to match FontAwesome 5.0.6 far icon

* Use iconPrefix property on component

* Use full icon class name

* Update icon helper docblock

* Full icon class syntax

framework/core/js/lib/components/Alert.js

@@ -37,7 +37,7 @@ export default class Alert extends Component {
     if (dismissible || dismissible === undefined) {
       dismissControl.push(
         <Button
-          icon="times"
+          icon="fa fa-times"
           className="Button Button--link Button--icon Alert-dismiss"
           onclick={ondismiss}/>
       );

framework/core/js/lib/components/Checkbox.js

@@ -52,7 +52,7 @@ export default class Checkbox extends Component {
   getDisplay() {
     return this.loading
       ? LoadingIndicator.component({size: 'tiny'})
-      : icon(this.props.state ? 'check' : 'times');
+      : icon(this.props.state ? 'fa fa-check' : 'fa fa-times');
   }
 
   /**

framework/core/js/lib/components/Dropdown.js

@@ -26,7 +26,7 @@ export default class Dropdown extends Component {
     props.buttonClassName = props.buttonClassName || '';
     props.menuClassName = props.menuClassName || '';
     props.label = props.label || '';
-    props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'caret-down';
+    props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'fa fa-caret-down';
   }
 
   init() {

framework/core/js/lib/components/Modal.js

@@ -29,7 +29,7 @@ export default class Modal extends Component {
           {this.isDismissible() ? (
             <div className="Modal-close App-backControl">
               {Button.component({
-                icon: 'times',
+                icon: 'fa fa-times',
                 onclick: this.hide.bind(this),
                 className: 'Button Button--icon Button--link'
               })}

framework/core/js/lib/components/Navigation.js

@@ -52,7 +52,7 @@ export default class Navigation extends Component {
     return LinkButton.component({
       className: 'Button Navigation-back Button--icon',
       href: history.backUrl(),
-      icon: 'chevron-left',
+      icon: 'fa fa-chevron-left',
       title: previous.title,
       config: () => {},
       onclick: e => {
@@ -77,7 +77,7 @@ export default class Navigation extends Component {
     return Button.component({
       className: 'Button Button--icon Navigation-pin' + (pane.pinned ? ' active' : ''),
       onclick: pane.togglePinned.bind(pane),
-      icon: 'thumb-tack'
+      icon: 'fa fa-thumbtack'
     });
   }
 
@@ -100,7 +100,7 @@ export default class Navigation extends Component {
         e.stopPropagation();
         drawer.show();
       },
-      icon: 'reorder'
+      icon: 'fa fa-bars'
     });
   }
 }

framework/core/js/lib/components/Select.js

@@ -18,7 +18,7 @@ export default class Select extends Component {
         <select className="Select-input FormControl" onchange={onchange ? m.withAttr('value', onchange.bind(this)) : undefined} value={value}>
           {Object.keys(options).map(key => <option value={key}>{options[key]}</option>)}
         </select>
-        {icon('sort', {className: 'Select-caret'})}
+        {icon('fa fa-sort', {className: 'Select-caret'})}
       </span>
     );
   }

framework/core/js/lib/components/SelectDropdown.js

@@ -13,7 +13,7 @@ import icon from 'flarum/helpers/icon';
  */
 export default class SelectDropdown extends Dropdown {
   static initProps(props) {
-    props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'sort';
+    props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'fa fa-sort';
 
     super.initProps(props);
 

framework/core/js/lib/components/SplitDropdown.js

@@ -28,7 +28,7 @@ export default class SplitDropdown extends Dropdown {
         className={'Dropdown-toggle Button Button--icon ' + this.props.buttonClassName}
         data-toggle="dropdown">
         {icon(this.props.icon, {className: 'Button-icon'})}
-        {icon('caret-down', {className: 'Button-caret'})}
+        {icon('fa fa-caret-down', {className: 'Button-caret'})}
       </button>
     ];
   }

framework/core/js/lib/helpers/icon.js

@@ -1,12 +1,12 @@
 /**
- * The `icon` helper displays a FontAwesome icon. The fa-fw class is applied.
+ * The `icon` helper displays an icon.
  *
- * @param {String} name The name of the icon class, without the `fa-` prefix.
+ * @param {String} fontClass The full icon class, prefix and the icon’s name.
  * @param {Object} attrs Any other attributes to apply.
  * @return {Object}
  */
-export default function icon(name, attrs = {}) {
-  attrs.className = 'icon fa fa-' + name + ' ' + (attrs.className || '');
+export default function icon(fontClass, attrs = {}) {
+  attrs.className = 'icon ' + fontClass + ' ' + (attrs.className || '');
 
   return <i {...attrs}/>;
 }

framework/core/js/lib/helpers/userOnline.js

@@ -8,6 +8,6 @@ import icon from 'flarum/helpers/icon';
  */
 export default function userOnline(user) {
     if (user.lastSeenTime() && user.isOnline()) {
-        return <span className="UserOnline">{icon('circle')}</span>;
+        return <span className="UserOnline">{icon('fa fa-circle')}</span>;
     }
 }

framework/core/js/lib/models/Discussion.js

@@ -84,7 +84,7 @@ Object.assign(Discussion.prototype, {
     const items = new ItemList();
 
     if (this.isHidden()) {
-      items.add('hidden', <Badge type="hidden" icon="trash" label={app.translator.trans('core.lib.badge.hidden_tooltip')}/>);
+      items.add('hidden', <Badge type="hidden" icon="fa fa-trash" label={app.translator.trans('core.lib.badge.hidden_tooltip')}/>);
     }
 
     return items;