Kookaburra is rolling its own icons, including SVGs as symbol tags. There’s a PHPlugins hook you can add to expand the library.
A symbol looks like this:
<symbol
fill="none"
id="check"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
>
<polyline points="9 11 12 14 22 4"></polyline>
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
</symbol>
To add your own, use the symbols_bottom PHPlugins hook.
Copy and paste the code above, and:
- update the
id
- set the
stroke-width to the same value as in your designer settings; if you’re unsure of the value, look at the other symbols in the page’s source code
- replace the SVG shapes inside of the
symbol tags with whatever you need; in the example code above, that means removing the polyline and path tags, and replacing them with your own
You can find SVGs in various places. You can mine shapes from Font Awesome icons, from IconSVG, Feather Icons, or any other SVG that you can find. You may or may not need to experiment with different icons to find one that works.
If the code isn’t exposed on the website, then just download the .svg file and open it in a text-editor.
Here’s a Home icon from IconSVG.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 9v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9"/><path d="M9 22V12h6v10M2 10.6L12 2l10 8.6"/></svg>
You’d want just the stuff inside of the svg tag, not the tag itself. So, from that, you would copy and paste this:
<path d="M20 9v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9"/><path d="M9 22V12h6v10M2 10.6L12 2l10 8.6"/>
Into the symbol that we started with, resulting in:
<symbol
fill="none"
id="check"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
>
<path d="M20 9v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9" />
<path d="M9 22V12h6v10M2 10.6L12 2l10 8.6" />
</symbol>
About