PackagesReroutesAboutlamdera.com

phosphor-icons/phosphor-elm/1.0.1

NOTE: the latest version is 2.1.0

READMEAboutVersionsSourceModules

Phosphor

Basic Usage

All icons have six weights; Regular, Thin, Light, Bold, Fill, and Duotone. Rendering an icon requires just a template and a weight:

cube : Html msg
cube =
    Phosphor.cube Bold
        |> Phosphor.toHtml []

Change Phosphor.cube to the icon you prefer, a list of all icons is visible here: https://phosphoricons.com

All icons of this package are provided as the internal type Icon. To turn them into an Html msg, simply use the toHtml function.

type alias Icon =

Type representing icon builder

= Thin
| Light
| Regular
| Bold
| Fill
| Duotone

Visual variant of the icon

Opaque type representing builder output

toHtml : List (Attribute msg) -> IconVariant -> Html msg

Build and icon, ready to use in html. It accepts list of svg attributes, for example in case if you want to add an event handler.

-- default
Phosphor.download
    |> Phosphor.toHtml []


-- with some attributes
Phosphor.download
    |> Phosphor.withSize 10
    |> Phosphor.withClass "custom-clazz"
    |> Phosphor.toHtml [ onClick Download ]

Customize Icons

Phosphor Icons are 1em by default, and come with the class ph-icon. For the aperture icon for example, this will be: ph-aperture. To customize its class and size attributes simply use the withClass and withSize functions before turning them into Html with toHtml.

Overwrite class attribute of an icon

Phosphor.download
    |> Phosphor.withClass "custom-clazz"
    |> Phosphor.toHtml []

Set size attribute of an icon

Phosphor.download
    |> Phosphor.withSize 10
    |> Phosphor.toHtml []

Set unit of size attribute of an icon, one of: "em", "ex", "px", "in", "cm", "mm", "pt", "pc", "%"

Phosphor.download
    |> Phosphor.withSize 50
    |> Phosphor.withSizeUnit "%"
    |> Phosphor.toHtml []

New Custom Icons

If you'd like to use same API while creating personally designed icons, you can use the customIcon function. You have to provide it with a List (Svg Never) that will be embedded into the icon.

customIcon : List (Svg Never) -> IconVariant

Build custom svg icon

[ Svg.line [ x1 "21", y1 "10", x2 "3", y2 "10" ]
, Svg.line [ x1 "21", y1 "6", x2 "3", y2 "6" ]
, Svg.line [ x1 "21", y1 "14", x2 "3", y2 "14" ]
, Svg.line [ x1 "21", y1 "18", x2 "3", y2 "18" ]
]
    |> customIcon
    |> withSize 26
    |> withViewBox "0 0 26 26"
    |> toHtml []

Example output: <svg xmlns=" width="26" height="26" viewBox="0 0 26 26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

IconList

article SVG Assets

Modules

About this package serverReroutesreroutes.json
Pages and docs rendering from package.elm-lang.org, © 2012-2020 Evan Czaplicki. © 2026 Lamdera