Class: Loco::IconComponent

Inherits:
LocoMotion::BaseComponent show all
Includes:
LocoMotion::Concerns::TippableComponent
Defined in:
app/components/loco/icon_component.rb

Overview

Note:

By default, icons are displayed with the size-5 Tailwind class. This can be overridden without using the ! modifier because we utilize the :where() pseudo-class to ensure our default classes have the lowest CSS specificity.

Note:

The icon color is inherited from the parent's text color, since the bundled SVGs use currentColor.

Creates an icon component rendered as inline SVG from any installed icon library. LocoMotion bundles only a small, curated set of Heroicons — the icons its own components render, so they work with zero setup:

  • check, check-circle
  • chevron-left, chevron-right
  • exclamation-circle, exclamation-triangle
  • information-circle
  • swatch
  • trash
  • x-mark

Each is bundled in all four Heroicons variants (outline, solid, mini, and micro). Every other icon — the rest of Heroicons, or any other library like Lucide, Phosphor, Tabler, and brand sets — is synced into your own application (see the loco_motion:icons:add / loco_motion:icons:sync tasks).

Constant Summary

Constants inherited from LocoMotion::BaseComponent

LocoMotion::BaseComponent::EMPTY_PART_IGNORED_TAGS, LocoMotion::BaseComponent::SELF_CLOSING_TAGS

Instance Attribute Summary

Attributes inherited from LocoMotion::BaseComponent

#config, #loco_parent

Instance Method Summary collapse

Methods inherited from LocoMotion::BaseComponent

build, #component_ref, #config_option, #cssify, define_modifier, define_modifiers, define_part, define_parts, define_size, define_sizes, #empty_part_content, #inspect, #part, register_component_initializer, register_component_setup, #rendered_css, #rendered_data, #rendered_html, #rendered_stimulus_controllers, #rendered_tag_name, renders_many, renders_one, set_component_name, #set_loco_parent, #strip_spaces

Methods included from LocoMotion::Concerns::InspectableComponent

#build_inspect_string

Constructor Details

#initialize(*args, **kws, &block) ⇒ IconComponent

Create a new instance of the IconComponent.

Parameters:

  • args (Array) —

    If provided, the first argument is considered the icon name.

  • kws (Hash) —

    The keyword arguments for the component.

Options Hash (**kws):

  • icon (String) —

    The icon to display, as a [library:]name[/variant] token (e.g. "academic-cap", "lucide:heart", "bolt/solid", "phosphor:gear/bold"). The library and variant default to LocoMotion.configuration.default_icon_library (:heroicons) and default_icon_variant (:outline). Encode a non-default library or variant in the token — there are no separate library: / variant: options.

  • css (String) —

    Additional CSS classes for styling. Common options include:

    • Size: size-4, size-10, size-14
    • Color: text-red-600, text-green-600, text-yellow-400
    • Animation: animate-pulse, animate-spin
  • tip (String) —

    The tooltip text to display when hovering over the icon.



82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
# File 'app/components/loco/icon_component.rb', line 82

def initialize(*args, **kws, &block)
  if kws.key?(:library) || kws.key?(:variant)
    raise ArgumentError,
          "loco_icon no longer accepts `library:` or `variant:` — encode " \
          "them in the icon token instead, e.g. " \
          'loco_icon("lucide:heart/duotone").'
  end

  super

  # Accept either the :icon keyword argument or the first positional argument
  @icon = config_option(:icon, args[0])
  @css = config_option(:css, "")
end

Instance Method Details

#before_render ⇒ Object 



97
98
99
100
101
 
# File 'app/components/loco/icon_component.rb', line 97

def before_render
  super

  add_css(:component, "where:size-5") unless @css.include?("size-")
end

#call ⇒ Object

Renders the icon component.

Because this is an inline component which might be utilized alongside text, we utilize the call method instead of a template to ensure that no additional whitespace gets added to the output.



110
111
112
113
114
115
116
117
 
# File 'app/components/loco/icon_component.rb', line 110

def call
  LocoMotion::Icons::Renderer.new(
    name: @icon,
    library: LocoMotion.configuration.default_icon_library,
    variant: LocoMotion.configuration.default_icon_variant,
    attributes: rendered_html(:component)
  ).to_svg.html_safe
end