Icons

ShipClojure uses SVG sprites for optimal icon performance. You'll find raw SVGs in the resources/icons 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.

Here is a blog post I wrote about the full technique used in ShipClojure.

The SVGs used by default in ShipClojure come from lucide.dev. You can download additional SVG icons from there, or provide your own. Once you've added new files in the icons directory, run bb run build-icons and you can then use the icon.cljc 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.clj 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>