phosphor-leptos

Phosphor 是一个灵活的图标库，适用于界面、图表、演示文稿等。更多信息请访问 phosphoricons.com。

安装

phosphor-leptos = "0.5.0"

或

cargo add phosphor-leptos

使用

use leptos::*;
use phosphor_leptos::{IconWeight, Horse, Heart, Cube};
#[component]
fn MyComponent() -> impl IntoView {
    view! {
        <Horse />
        <Heart color="#AE2983" weight=IconWeight::Fill size="32px" />
        <Cube color="teal" weight=IconWeight::Duotone />
    }
}

Props

所有 props 都是 MaybeSignal，因此可以是静态的或响应式的。

• color?: string – 图标描边/填充颜色。可以是任何 CSS 颜色字符串，包括 hex、rgb、rgba、hsl、hsla、命名颜色或特殊的 currentColor 变量。
• size?: number | string – 图标高度和宽度。与标准 React 元素一样，这可以是一个数字，也可以是一个带有单位的字符串，单位可以是 px、%、em、rem、pt、cm、mm、in。
• weight?: IconWeight – 图标重量/样式。也可以用于切换图标的某些状态：例如，评分组件可以使用 IconWeight::Regular 表示空星，而使用 IconWeight::Fill 表示实心星。
• mirrored?: boolean – 水平翻转图标。在 RTL 语言中，这可能在正常图标方向不适用时非常有用。

许可证

MIT © Phosphor Icons

知识

• Phosphor Svelte

贡献

要生成所有图标，运行

cargo xtask update