How to add a custom backbutton icon to whole app
This is a simple example of 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
- import addFilter function from @appmaker-xyz/core
import { appmaker, addFilter } from '@appmaker-xyz/core';- 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: ,
};
});