Icons

ShipClojure uses SVG sprites for optimal icon performancearrow-up-right. You'll find raw SVGs in the resources/iconsarrow-up-right directory. These are then compiled into a sprite using the bb run build-icons script, which generates the sprite.svg file, which is loaded into your html.

Herearrow-up-right is a blog post I wrote about the full technique used in ShipClojure.

The SVGs used by default in ShipClojure come from lucide.devarrow-up-right. You can download additional SVG icons from there, or provide your own. Once you've added new files in the icons directoryarrow-up-right, run bb run build-icons and you can then use the icon.cljcarrow-up-right component to render it.

(ns example
 (:require
    [uix.core :refer [$ defui]]
    [saas.common.ui.icon :refer [icon]]))

(defui my-cool-component
    []
    ($ :div
      ($ icon {:icon :moon
               :size :lg
               :class "text-red-300"})))

The :icon or :name prop is the name of the file without the .svg extension. We recommend using kebab-case filenames rather than PascalCase to avoid casing issues with different operating systems.

Note that the build_icons.cljarrow-up-right script automatically removes width and height props from your SVGs to ensure they scale properly.

By default, all the icons will have a height and width of 1em so they should match the font-size of the text they're next to. You can also customize the size using the :size prop or :class "w-8 h-8"

You can use the sprite.svg on server rendered pages also, and even in the blog templates like so:

<div>
    <svg class="inline self-center w-[1em] h-[1em]">
       <use href="/svg/sprite.svg#moon" />
    </svg>
</div>

Last updated