Custom icons

This tutorial works only with an advanced theme styling setup. As described here https://www.one.thezero.club/guide/theme-styling/less-css-setup.

By default UIkit used for the front-end in the Zero One theme comes with a large set of icons, you can see them all in UIkit documentation https://getuikit.com/docs/icon.

Some of them are used in the Zero One theme for the social icons, slider & slideshow arrows, search, mobile menu icon, etc. But, many of them are custom, not like UIkit default. Now, we'll show you how to do it yourself.

You can overwrite any of the default icons from UIkit and create additional ones.

Let's change the mobile menu icon

In Zero One theme files find and go to /assets/app/custom/icons/ folder. There are already some SVG icons, and these are the ones we added.

Default UIkit icon we used for mobile menu button is menu.svg (all default UIkit icons can be found at /assets/app/src/images/icons/ folder).

If you create and add an icon with an existing name, you will overwrite the default icon of the same name. For example, /custom/icons/close.svg would overwrite the default close icon.

If your icon uses a name that has not been used before, it will be added as a new icon. For example, /custom/icons/example.svg will create a new icon that can be used via <span uk-icon="example"></span>.

After you add a custom icon to /assets/app/custom/icons/ folder you must compile Less/JS again like usual https://www.one.thezero.club/guide/theme-styling/less-css-setup.

So, here are few menu icons we created already for you.

The software used is Affinity Designer if you wonder.

We exported every one of them as .svg.

But after exporting you will have to do some SVG code fixing to make it right.

Default menu.svg has this code

assets/app/src/images/icons/menu.svg

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    <rect x="2" y="4" width="16" height="1" />
    <rect x="2" y="9" width="16" height="1" />
    <rect x="2" y="14" width="16" height="1" />
</svg>

But after export, our icon had this code. The main problem in this exported code is width and height.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(1,0,0,1,-23.2642,-1.77636e-15)">
        <g id="Menu-2" serif:id="Menu 2" transform="matrix(1,0,0,1,23.2642,1.77636e-15)">
            <rect x="0" y="0" width="20" height="20" style="fill:none;"/>
            <g transform="matrix(0.75,0,0,1,2.5,-0.0300184)">
                <rect x="2" y="4" width="16" height="1"/>
            </g>
            <g transform="matrix(1.00218,0,0,1,-0.0393108,0)">
                <rect x="2" y="9" width="16" height="1"/>
            </g>
            <g transform="matrix(0.75,0,0,1,2.5,0.0300184)">
                <rect x="2" y="14" width="16" height="1"/>
            </g>
        </g>
    </g>
</svg>

So after code fixing and cleanup, it looks like this. Now it is ready.

<svg width="20" height="20" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g transform="matrix(1,0,0,1,-23.2642,-1.77636e-15)">
        <g transform="matrix(1,0,0,1,23.2642,1.77636e-15)">
            <rect x="0" y="0" width="20" height="20" style="fill:none;"/>
            <g transform="matrix(0.75,0,0,1,2.5,-0.0300184)">
                <rect x="2" y="4" width="16" height="1"/>
            </g>
            <g transform="matrix(1.00218,0,0,1,-0.0393108,0)">
                <rect x="2" y="9" width="16" height="1"/>
            </g>
            <g transform="matrix(0.75,0,0,1,2.5,0.0300184)">
                <rect x="2" y="14" width="16" height="1"/>
            </g>
        </g>
    </g>
</svg>

So, the main code fix of the icon is to set width and height to 20.

You can download these menu icons we created below, and try it yourself.

142KB

custom-menu.zip

archive

Three custom menus

Remember that after you add a custom icon to /assets/app/custom/icons/ folder you must compile Less/JS again like usual https://www.one.thezero.club/guide/theme-styling/less-css-setup.