Converting SVG Icons to URI for ZimaOS Dashboard

Operating System ZimaOS
,
1

Converting SVG Icons to URI for ZimaOS Dashboard

If you are like me, an advanced Linux user, using ZimaOS you probably have a LOT of services installed with custom docker-compose.yml files instead of using the App Store. When it comes to setting icons for those services to display on the server’s dashboard I had felt pretty limited. That is, until I remembered you can easily convert an SVG vector graphics file into a URI. I gave it a try and it worked! This is a HUGE benefit because you no longer need to rely on some server somewhere on the Internet to continue hosting your desired icon. It is now entirely encoded within a URI. In this post I will show you how you can do this yourself.

An SVG icon is not an actual image with a resolution like the image you take with your camera. It is really just an XML text file that tells the computer how to draw the graphic. This is called a “Vector graphic.” They are great because the files are tiny, and they can be resized up or down basically infinitely without losing any quality. This is how we are able to convert the SVG into a URI that the ZimaOS dashboard can understand.

Prerequisites:

  • A Linux PC (Could work on Windows, but these Instructions are for the Bash shell)
  • Node.js (Javascript runtime)
  • xclip package (Optional)

You can simply use the command below if you only need to do one icon, but if you have several icons (or just want to have an easy way to do it in the future) you can follow the instructions to make a special function.

The command:

cat <your-icon>.svg | node -e "const fs = require('fs'); console.log('data:image/svg+xml;charset=utf-8,' + encodeURIComponent(fs.readFileSync(0, 'utf-8')))"

Then copy / paste the output into the Icon URL in your service’s settings on the ZimaOS dashboard.

How-To Set Up A Function:

  1. Open up your .bashrc file with a text editor and paste in this function.

    nano ~/.bashrc

  2. Paste this function into the bottom of the file:

    svg2uri() {
  node -e "const fs = require('fs'); console.log('data:image/svg+xml;charset=utf-8,' + encodeURIComponent(fs.readFileSync(0, 'utf-8').trim()))"
}

  3. Save and close the ~/.bashrc file:

    • Ctrl+O to save
    • Ctrl+X to close

  4. Reload your configuration:

    source ~/.bashrc

  5. Now you can use the function as a shortcut like this:

    cat <your-icon>.svg | svg2uri

  6. You can copy / paste the output just like the command above, or you can use the xclip command to automatically copy the output into your clipboard.

    cat icon.svg | svg2uri | xclip -selection clipboard

  7. For Linux PC’s that are running Wayland you can also use wl-copy as an alternative to xcopy

    cat icon.svg | svg2uri | wl-copy

Thanks for reading! I hope this helps those of you, like me, who want to install services from your own docker-compose.yml files and still want to have a pretty server dashboard with the correct icons.