Creating a custom icon in UIkit 3

Using vectors icons is a breeze when using UIkit. For instance, here is the Github icon.

<span uk-icon="icon: github"></span>

Here is a bigger version of the Github icon.

<span uk-icon="icon: github; ratio: 5"></span>

When rebuilding philmareu.com, I wanted to be able to use my personal logo as a UIkit icon. So I followed the basic instructions for creating custom icons and built one. First, is to compile from source. In the past, I was able to do this with just npm but it looks like they have switched to using yarn. So I'll need to get that installed. I'll use Homebrew.

brew install yarn --without-node

Next, I need to travel inside the package directory.

cd node_modules/uikit/

Run yarn to install packages.

yarn

Now I'll move my custom icon philmareu.svg into node_modules/uikit/custom/icons/ as recommended in the docs.

Let's compile the UIkit package source files and then bundle the project's assets with Laravel Mix.

yarn compile

cd ../../
npm run production

Let's try the icon.

<span uk-icon="icon: philmareu; ratio: .1"></span>

Works! The .svg is quite a bit bigger than the core icons but I'll just adjust the ratio accordingly.

One obvious issue is that when the package is updated it will remove the custom icon and this process will have to be redone. I'm not sure how to remedy this, but for now it hasn't been a big deal. There probably is a way to create a script to handle this but maybe I'll work on that for another post.