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.
Visual variant of the icon
type IconVariant
Opaque type representing builder output
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.
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:
width="26" height="26" viewBox="0 0 26 26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
IconList
Type representing icon builder