How to add a custom backbutton icon to whole app

​

Introduction

​ This is a simple example of how to add a custom backbutton icon to whole app. ​

Steps

​1. import addFilter function from @appmaker-xyz/core

import { appmaker, addFilter } from '@appmaker-xyz/core';

​ 2. Add filter to change backbutton icon inside the activate function of your theme or plugin. ​

Using svg

const backSvg = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 5L3 12L10 19" stroke="#414040" stroke-linecap="round"/>
<path d="M4 12H22" stroke="#414040" stroke-linecap="round"/>
</svg>`;
​
addFilter('app-back-button-icon', 'back-icon', () => {
    return {
      svgXml: backSvg,
    };
  });

Using Feather Icons name

Go to https://feathericons.com/ and search for the icon and copy its name and use it in the filter in the name key.

const iconName = 'chevron-left'; // icon name copied from feathericons.com
addFilter('app-back-button-icon', 'back-icon', () => {
    return {
      name: ,
    };
  });
​