Struct IconProps 

pub struct IconProps {
    pub icon: IconData,
    pub weight: Signal<IconWeight>,
    pub size: TextProp,
    pub color: TextProp,
    pub mirrored: Signal<bool>,
}

Props for the Icon component.

A thin wrapper around <svg /> for displaying Phosphor icons.

use leptos::prelude::*;
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 />
    }
}

Required Props

• icon: IconData
  • The icon data to display.

Optional Props

• weight: impl Into<Signal<IconWeight>>

  • Icon weight/style. This 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.

• size: impl Into<TextProp>

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

• color: impl Into<TextProp>

  • Icon stroke/fill color.

    This can be any CSS color string, including hex, rgb, rgba, hsl, hsla, named colors, or the special currentColor variable.

• mirrored: impl Into<Signal<bool>>

  • Flip the icon horizontally.

    This can be useful in RTL languages where normal icon orientation is not appropriate.

Fields

icon: IconData

The icon data to display.

weight: Signal<IconWeight>

Icon weight/style. This 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.

size: TextProp

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.

color: TextProp

Icon stroke/fill color.

This can be any CSS color string, including hex, rgb, rgba, hsl, hsla, named colors, or the special currentColor variable.

mirrored: Signal<bool>

Flip the icon horizontally.

This can be useful in RTL languages where normal icon orientation is not appropriate.

Implementations

impl IconProps

pub fn builder() -> IconPropsBuilder<((), (), (), (), ())>

Create a builder for building IconProps. On the builder, call .icon(...), .weight(...)(optional), .size(...)(optional), .color(...)(optional), .mirrored(...)(optional) to set the values of the fields. Finally, call .build() to create the instance of IconProps.

Trait Implementations

impl Props for IconProps

type Builder = IconPropsBuilder

fn builder() -> Self::Builder