How can I change the Navigation Back button icon

lb308

Hello to flarumers

I am creating an extension for flarum beta 8.1 and I want to override the Navigation.js Components, i try to change the fontawesome icon.

this is the method for the Navigation Back Button :

getBackButton() {
    const {history} = app;
    const previous = history.getPrevious() || {}; 
    return LinkButton.component({
      className: 'Button Navigation-back Button--icon',
      href: history.backUrl(),
      icon: 'fas fa-chevron-left',
      title: previous.title,
      config: () => {},
      onclick: e => {
        if (e.shiftKey || e.ctrlKey || e.metaKey || e.which === 2) return;
        e.preventDefault();
        history.back();
      }
    });
  }

I want to change the fontawesome icon: 'fas fa-chevron-left',

to be icon: 'fas fa-chevron-right'
....
the solution is 😀

import { extend } from 'flarum/extend';
import Navigation from 'flarum/components/Navigation';

extend(Navigation.prototype, 'getBackButton', function(vdom) {
    // console.log(vdom);
    if (vdom.props) {
        vdom.props.icon = 'fas fa-chevron-right';
    }    
});

solved.
thanks all

irmmr

Thanks, but now you have to do this (a little change):

import { extend } from 'flarum/extend';
import Navigation from 'flarum/common/components/Navigation';

extend(Navigation.prototype, 'getBackButton', function (vdom) {
    if (vdom.attrs) {
        vdom.attrs.icon = 'fas fa-chevron-right';
    }
});