Skip to content

SorenHolstHansen/phosphor-leptos

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

44 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

phosphor-leptos

crates.io docs.rs

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 MaybeSignals so they can be static or reactive.

  • color?: string – Icon stroke/fill color. Can be any CSS color string, including hex, rgb, rgba, hsl, hsla, named colors, or the special currentColor variable.
  • size?: number | string – Icon height & width. As with standard React elements, this can be a number, or a string with units in px, %, 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 with IconWeight::Regular to denote an empty star, and IconWeight::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

About

Phosphor icons for leptos

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages