Icons
Last updated
Last updated
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.
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: