Metadata-Version: 2.4
Name: fastlucide
Version: 0.0.7
Summary: Lucide icons for FastHTML
Author-email: Jeremy Howard <github@jhoward.fastmail.fm>
License: Apache-2.0
Project-URL: Repository, https://github.com/AnswerDotAI/fastlucide
Project-URL: Documentation, https://AnswerDotAI.github.io/fastlucide
Keywords: nbdev,jupyter,notebook,python
Classifier: Natural Language :: English
Classifier: Intended Audience :: Developers
Classifier: Development Status :: 3 - Alpha
Classifier: Programming Language :: Python :: 3
Classifier: Programming Language :: Python :: 3 :: Only
Requires-Python: >=3.9
Description-Content-Type: text/markdown
License-File: LICENSE
Requires-Dist: fastcore
Requires-Dist: python-fasthtml
Dynamic: license-file

# fastlucide


<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

A convenient FastHTML wrapper for the excellent [Lucide](https://lucide.dev/) icon library.

## Installation

Install from [pypi](https://pypi.org/project/fastlucide/)

``` sh
$ pip install fastlucide
```

## How to use

``` python
from fastlucide import *
```

### SvgSprites

The most convenient way to use fastlucide is to create an [`SvgSprites`](https://AnswerDotAI.github.io/fastlucide/core.html#svgsprites) class, passing in a short prefix to ensure IDs are unique:

``` python
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.)

``` python
from fasthtml.common import show,Div
```

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

<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>

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

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

``` python
show(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>

### 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`](https://AnswerDotAI.github.io/fastlucide/core.html#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.

``` python
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.

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

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" height="24px" width="24px" class="lucide-icon "><use href="#air-vent" style="stroke: green"></use></svg><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" height="48px" width="48px" class="lucide-icon "><use href="#apple" style="fill: red"></use></svg><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" height="24px" width="24px" class="lucide-icon "><use href="#air-vent" style="stroke: green"></use></svg><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="x"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></symbol><symbol id="apple"><path d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z"></path><path d="M10 2c1 .5 2 2 2 5"></path></symbol><symbol id="circle"><circle cx="12" cy="12" r="10"></circle></symbol><symbol id="air-vent"><path d="M18 17.5a2.5 2.5 0 1 1-4 2.03V12"></path><path d="M6 12H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><path d="M6 8h12"></path><path d="M6.6 15.572A2 2 0 1 0 10 17v-5"></path></symbol></defs></svg>

You can create a combination of SVGs:

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

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" height="24px" width="24px" class="lucide-icon "><use href="#circle" style="stroke: steelblue"></use><use href="#x" style="stroke: crimson"></use></svg>

<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="x"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></symbol><symbol id="apple"><path d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z"></path><path d="M10 2c1 .5 2 2 2 5"></path></symbol><symbol id="circle"><circle cx="12" cy="12" r="10"></circle></symbol><symbol id="air-vent"><path d="M18 17.5a2.5 2.5 0 1 1-4 2.03V12"></path><path d="M6 12H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><path d="M6 8h12"></path><path d="M6.6 15.572A2 2 0 1 0 10 17v-5"></path></symbol></defs></svg>

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.

``` python
from fastlucide import icons
```

``` python
[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:

``` python
ss('a-arrow-down')
```

``` html
<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:

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

``` python
Markdown(highlight(ss))
```

``` html
<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>
```
