As a quick introduction, the ion-menu-button
is a component that works together with the neat ion-menu
. That means that once added, the ion-menu-button
can open the ion-menu
automatically 🤓. Therefore, we don't need to worry about anything since Ionic will handle the click event internally for us.
The thing is that sometimes you will have the requirement to show a different icon. Luckily for us, this can be achieved with the help of the ion-icon
component.
As many of you might know, this component has the ability to render any of the icons found on the Ionicons library and custom assets like a local image and even better, an SVG.
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button>
<ion-icon src="./assets/img/custom-menu.svg"></ion-icon>
</ion-menu-button>
</ion-buttons>
<ion-title></ion-title>
</ion-toolbar>
To define a custom asset for our ion-icon
is as easy as just passing the path of our file in the src
property.
Since SVG's are just files based on the XML format, let's first create it by opening the command line and running the instruction below:
touch ./src/assets/img/custom-menu.svg
Next, let's open our newly created custom-menu.svg
. You can do this manually using your file explorer, or if you're using VSCode... 😎
code ./src/assets/img/custom-menu.svg
Now copy and paste the XML below into the custom-menu.svg
.
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20">
<defs>
<style>
.cls-1 {
fill: currentColor;
}
</style>
</defs>
<g transform="translate(-23 -44)">
<rect class="cls-1" width="22" height="1.8" rx="2" transform="translate(23 44)"/>
<rect class="cls-1" width="15" height="1.8" rx="2" transform="translate(23 52)"/>
<rect class="cls-1" width="22" height="1.8" rx="2" transform="translate(23 60)"/>
</g>
</svg>
The cool part is that using this technique it's possible to customize the theme by just adding the color
attribute in the ion-menu-button
.
<!-- Dark color -->
<ion-icon color="dark" src="./assets/img/custom-menu.svg"></ion-icon>
<!-- Secondary color -->
<ion-icon color="secondary" src="./assets/img/custom-menu.svg"></ion-icon>
<!-- Tertiary color -->
<ion-icon color="tertiary" src="./assets/img/custom-menu.svg"></ion-icon>
Demo:
That's it! As always, I hope you've learned something new today.
Hasta la próxima!
Top comments (0)