Skip to main content

How to change menu and back icons in topbar

Overview​

This tutorial shows you how to change the menu and back icons in the topbar.

  1. Add filter to change menu icon in <theme-id>/src/index.js:
src/index.js
import { addFilter } from '@appmaker-xyz/core';

export function activate(params) {
  addFilter('app-menu-button-icon', 'menu-icon', () => {
    return {
      svgXml: menuSvg, //add svg xml here if you want to use svg icon as xml. example below
      svgIcon: MenuSvgIcon, //add svg file to your project and import it here if you want to use svg icon
      menuIconName: 'menu', //add icon name if you want to use feather icon
    };
  });
}

example of svgXml:

const menuSvg = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 6H21" stroke="#414040" stroke-linecap="round"/>
<path d="M3 18H21" stroke="#414040" stroke-linecap="round"/>
<path d="M3 12H21" stroke="#414040" stroke-linecap="round"/>
</svg>`;
note

You can use either svgXml or svgIcon or iconName to change menu icon.

Back Icon​

  1. Add filter to change back icon in <theme-id>/src/index.js:
src/index.js
import { addFilter } from '@appmaker-xyz/core';

export function activate(params) {
  addFilter('app-back-button-icon', 'back-icon', () => {
    return {
      svgXml: backSvg, //add svg xml here if you want to use svg icon as xml. example below
      svgIcon: BackSvgIcon, //add svg file to your project and import it here if you want to use svg icon
      backButtonIconName: 'arrow-left', //add icon name if you want to use feather icon
    };
  });
}

example of svgXml:

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>`;
note

You can use either svgXml or svgIcon or iconName to change back icon.