SurfaceFontAwesome.Icon (surface_font_awesome v0.2.3) View Source

A component that displays an icon compatible with the FontAwesome icons

Examples:

~F"""
  <FA icon="camera" />
"""

The values for the icon names are

Properties

  • size :string, values: ["xs", "sm", "lg", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x"] - The size of the icon.
  • transform :string - Transformations of the icon. Use rotate-#, grow-#, shrink-#, right-#, left-#, up-#, down-# in any combination. Rotations are in degrees, placement and scaling are in 1/16th em .
  • style :string, default: "" - Styles for the component.
  • class :css_class - CSS classes for the component.
  • icon :string, required: true, values: Map.keys(@icon_names) - The icon to display.
  • animated :string, values: ["spin", "pulse"] - Specifies if the icon should be animated and which animation to use.
  • icon_style :string, default: "", values: ["solid", "regular", "light", "duotone"] - Specifies the style of the icon. Allows for the selection of Pro icon styles.
  • mask :string, values: Map.keys(@icon_names) - Sets a mask to use with the icon.
  • rotate :string, values: ["90", "180", "270"] - Set the rotation of the icon with predefined angles.
  • flip :string, values: ["horizontal", "vertical", "both"] - Flip the icon on a certain axis, or both (to mirror).
  • primary_color :string - Primary color of the icon, if a duotone icon style is chosen, otherwise this is ignored.
  • secondary_color :string - Secondary color of the icon, if a duotone icon style is chosen, otherwise this is ignored.
  • primary_opacity :decimal - Primary opacity of the icon, if a duotone icon style is chosen, otherwise this is ignored.
  • secondary_opacity :decimal - Secondary opacity of the icon, if a duotone icon style is chosen, otherwise this is ignored.

Link to this section Summary

Functions

Returns the supported icon names that can be used for the icon and mask props

Callback implementation for Phoenix.LiveComponent.mount/1.

Callback implementation for Phoenix.LiveComponent.render/1.

Link to this section Functions

Returns the supported icon names that can be used for the icon and mask props

Callback implementation for Phoenix.LiveComponent.mount/1.

Callback implementation for Phoenix.LiveComponent.render/1.

Callback implementation for Phoenix.LiveComponent.update/2.