fastlucide

A convenient FastHTML wrapper for the excellent Lucide icon library.

Installation

Install from pypi

$ pip install fastlucide

How to use

from fastlucide import *

SvgSprites

The most convenient way to use fastlucide is to create an SvgSprites class, passing in a short prefix to ensure IDs are unique:

ss = SvgSprites('l-')

Then add icons whereever you want to show them, by calling the ss object with the desired name. Any additional attrs are added to the SVG.

(NB: we use show here to cause the SVGs to render in the notebook/docs. This isn’t needed in a regular FastHTML app.)

from fasthtml.common import show,Div

show(ss('a-arrow-down'))
show(ss('accessibility'))

Finally, be sure to render ss itself, to add the sprite sheet to the DOM.

show(ss)

<style>.lucide-icon { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }</style>

fastlucide.icons

If you dynamically add a new icon to the DOM after loading the page (e.g using an HTMX swap), then the SvgSprites element will not contain that icon, so it won’t display. One solution to this is to preinitialize using e.g SvgSprites(nms=['air-vent', 'apple']).

Alternatively, you can import any icon name (sentence-cased, with underscores instead of hyphens) from fastlucide.icons, which will create an icon-generating function and also adds the name to spritesheet, which is an SvgSprite singleton.

from fastlucide.icons import spritesheet, Air_vent, Apple, Circle, X

You can now call Air_vent and Apple as functions – be sure to also include spritesheet in the DOM. If you use the same icon multiple times, you can optionally store it in a variable.

vent = Air_vent(stroke='green')
show(vent, Apple(sz=48, fill='red'), vent,
     spritesheet)

<style>.lucide-icon { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }</style>

You can create a combination of SVGs:

show(Circle(stroke='steelblue') + X(stroke='crimson'))
show(spritesheet)

<style>.lucide-icon { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }</style>

Because fastlucide.icons supports the __dir__ protocol, you can use tab-completion in jupyter and similar environments to view a list of matching icons. Or call dir() programmatically.

from fastlucide import icons

[o for o in dir(icons) if o.startswith('Star')]

['Star', 'Star_half', 'Star_off']

How it works

When we render an icon, the actual SVG path information is not included – only an href to an id is there:

ss('a-arrow-down')

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" height="24px" width="24px" class="lucide-icon "><use href="#l-a-arrow-down"></use></svg>

The definitions of these ids is provided in the ss object itself, along with style information:

from fastcore.xml import highlight
from IPython.display import Markdown

Markdown(highlight(ss))

<style>.lucide-icon { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }</style>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none"><defs><symbol id="l-a-arrow-down"><path d="M3.5 13h6"></path><path d="m2 16 4.5-9 4.5 9"></path><path d="M18 7v9"></path><path d="m14 12 4 4 4-4"></path></symbol><symbol id="l-accessibility"><circle cx="16" cy="4" r="1"></circle><path d="m18 19 1-7-6 1"></path><path d="m5 8 3-3 5.5 3-2.36 3.5"></path><path d="M4.24 14.5a5 5 0 0 0 6.88 6"></path><path d="M13.76 17.5a5 5 0 0 0-6.88-6"></path></symbol></defs></svg>