Skip to content

Phosphor

Phosphor is a library of over 1,000 icons, each in six different styles.

Usage

  1. Find the icon you want
  2. Pass its name to icons.phosphor
import RIL as icons

icons.phosphor("acorn")

Icon names are case-inensitive.

Props

Name Type Description
variant str The variant of the icon. May be one of "thin", "light", "regular", "bold", "fill", or "duotone".
color str | tuple May be an rx.color object or Pydantic-recognized color definition.
size int | str The size of the icon. May be an integer (in pixels) or a CSS size string (e.g., "1rem").
alt str Alt text for the icon.

Context

RIL supports the use of Phosphor's Context feature to apply a default style to a group of icons.

import RIL as icons

icons.phosphor.context(
    icons.phosphor("horse"),  # I'm lime-green, 32px, and bold!
    icons.phosphor("heart"),  # Me too!
    icons.phosphor("cube"),  # Me three :)
    color="limegreen",
    size=32,
    variant="bold",
)
What about the mirrored prop?

You may have noticed that Phosphor's documentation mentions a mirrored prop which isn't present in the above example. RIL doesn't currently support this prop because I can't get it to work. I don't know why. If you do, contributions are welcome.

Global Context

You can configure the phosphor settings group to have a default style applied to all Phosphor icons in your project.

phosphor.*: Settings for configuring Phosphor icons.

The phosphor settings group allows you to configure default styling options that will be applied to all Phosphor icons in your project.

You can configure a default for any prop other than alt.

[tool.ril.phosphor]
color = "limegreen"
size = 32
variant = "bold"

[phosphor]
color = "limegreen"
size = 32
variant = "bold"

RIL_PHOSPHOR__COLOR="limegreen"
RIL_PHOSPHOR__SIZE=32
RIL_PHOSPHOR__VARIANT="bold"