10 releases (5 breaking)
0.6.0 | Sep 20, 2024 |
---|---|
0.5.1 | Jun 16, 2024 |
0.5.0 | May 14, 2024 |
0.3.1 | Feb 23, 2024 |
0.1.0 | Oct 19, 2023 |
#118 in Images
276 downloads per month
4.5MB
12K
SLoC
phosphor-leptos
Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. You can explore the available icons at phosphoricons.com.
Installation
phosphor-leptos = "0.6.0"
or
cargo add phosphor-leptos
Usage
use leptos::*;
use phosphor_leptos::{Icon, IconWeight, HORSE, HEART, CUBE};
#[component]
fn MyComponent() -> impl IntoView {
view! {
<Icon icon=HORSE />
<Icon icon=HEART color="#AE2983" weight=IconWeight::Fill size="32px" />
<Icon icon=CUBE color="teal" weight=IconWeight::Duotone />
}
}
Props
All of the props are MaybeSignal
s so they can be static or reactive.
- color?:
string
– Icon stroke/fill color. Can be any CSS color string, includinghex
,rgb
,rgba
,hsl
,hsla
, named colors, or the specialcurrentColor
variable. - size?:
number | string
– Icon height & width. As with standard React elements, this can be a number, or a string with units inpx
,%
,em
,rem
,pt
,cm
,mm
,in
. - weight?:
IconWeight
– Icon weight/style. Can also be used, for example, to "toggle" an icon's state: a rating component could use Stars withIconWeight::Regular
to denote an empty star, andIconWeight::Fill
to denote a filled star. - mirrored?:
boolean
– Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.
License
MIT © Phosphor Icons
Knowledge
Contributing
To generate all the icons, run
cargo xtask update
Dependencies
~20–32MB
~501K SLoC