Rendering icons for use in HTML.
Most users will be able to just use the simple viewIcon, viewStyled and viewTransformed methods, but if you want
to use the more powerful features, this library uses a pipeline style to define the various potential parameters for
rendering an icon. In general, the base for rendering an icon is:
icon |> present |> viewExtra steps can be placed between present and view to customise the way the icon is rendered.
A convenience function to render an icon.
viewIcon icon is directly equivalent to directly equivalent to icon |> present |> view.
A convenience function to render an icon with some custom styles.
viewStyled styles icon is directly equivalent to directly equivalent to
icon |> present |> styled styles |> view.
A convenience function to render an icon with some custom styles.
viewTransformed styles transforms icon is directly equivalent to
icon |> present |> styled styles |> transform transforms |> view.
Information on how an icon should be rendered. In general, you shouldn't need to interact directly with this type - it should generally only exist in a chain of operations to display an icon.
Adding titles or using masking require that the icon has a unique id. This is because references are made in the HTML
via the HTML id attribute, which must be unique on the page. Views with an id will have the WithId
type and will therefore work with those options, while ones that have the WithoutId type won't.
Indicates that the presentation has an id, which lets you use titled and masked. For more on why those features
are "locked" like this, see the documentation for the View type above.
Indicates that the presentation does not have an id, which means you can't use titled and masked. For more on
why those features are "locked" like this, see the documentation for the View type above.
Gets a basic presentation of an icon.
If you do nothing else an pass this to view, the icon will be presented as semantically meaningless (i.e: purely
decorative) and will be hidden from accessibility tools. If you need the icon to have semantic meaning then using
titled will change that.
Render the given icon presentation to HTML. Take a look at present to get that presentation.
Add the given attributes to the icon's presentation. These will be applied to the icon when viewed.
Note the icon is an svg tag, and it appears that using Html.Attribute.class will remove any Svg.Attribute.class
values that are set, including FontAwesome ones that make the icon work, so make sure to use Svg.Attribute.class with
this.
Add the given transforms to the icon's presentation. These will be applied to the icon when viewed.
Set the HTML id for the icon presentation to the given value. This must be unique on the page.
The FontAwesome JavaScript library generates random ids for this. Doing this in elm is a little more cumbersome, but
is possible if you need to dynamically generate items and don't have existing ids to work from. Please see
the elm-fontawesome-example repository for an example of this.
Sets the title of the presented icon. This will make the icon semantically meaningful, and as such it won't be hidden from accessibility tools.
Note that this can only be applied where the icon has an id unique on the page as it uses that id under the hood in the
HTML. Use withId to add one.
Sets an outer icon that the main icon is masking (i.e.: the initial icon will become a "cut out" of this outer icon). This creates true transparency.
Note that this can only be applied where the icon has an id unique on the page as it uses that id under the hood in the
HTML. Use withId to add one.
The definition of an icon.
You will find these in the modules for the different Icon packs (e.g:
FontAwesome.Solid). You should never need to define these or change them yourself (but you can to create custom icons).