🚀
ShipClojure
  • README
  • Development
    • Getting Started
    • REPL Workflow
    • AI Development with ShipClojure
    • Getting Updates
    • Formatting code
    • ShipClojure Guiding Principles
  • Backend
    • Migrations
    • Secrets
    • Routing
    • ShipClojure Blog
    • Email
  • Frontend
    • UIx + re-frame
    • HTTP Requests with Re-frame
    • Frontend Navigation with Re-frame
    • Toast Notifications
    • Icons
  • Server Side Rendering
    • Static/Landing pages
  • Auth
    • How Auth works
    • Oauth2 providers
  • Deployment
    • Deployment
  • Decisions
    • 001 - Cookie Sessions
    • 002 - Single Page Application Architecture
    • 003 - Re-frame instead of Refx
    • 003 - Move from cookie sessions to JWT Access + refresh tokens
Powered by GitBook
On this page
  1. Frontend

Icons

PreviousToast NotificationsNextStatic/Landing pages

Last updated 1 month ago

ShipClojure uses SVG sprites for . You'll find raw SVGs in the 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.

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

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