Icon component

Gemfile.lock

@@ -156,9 +156,9 @@ GEM
     net-smtp (0.4.0)
       net-protocol
     nio4r (2.5.9)
-    nokogiri (1.16.0-arm64-darwin)
+    nokogiri (1.18.8-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.0-x86_64-linux)
+    nokogiri (1.18.8-x86_64-linux-gnu)
       racc (~> 1.4)
     parallel (1.23.0)
     parser (3.2.2.4)
@@ -287,6 +287,7 @@ GEM
 PLATFORMS
   arm64-darwin-21
   arm64-darwin-23
+  arm64-darwin-24
   x86_64-linux
 
 DEPENDENCIES

app/components/bulma/icon_component.html.erb

@@ -0,0 +1,12 @@
+<% if text.present? %>
+  <span class="icon-text">
+<% end %>
+
+<span class="icon has-text-<%= @color %>">
+  <%= @icon.call %>
+</span>
+
+<% if text.present? %>
+  <%= tag.span text %>
+  </span>
+<% end %>

app/components/bulma/icon_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Bulma
+  class IoniconsComponent < Component
+    def initialize(name)
+      @name = name
+    end
+
+    def call
+      content_tag "ion-icon", nil, name: @name
+    end
+  end
+
+  class FontAwesomeComponent < Component
+    def initialize(name)
+      @name = name
+    end
+
+    def call
+      tag "i", class: "fas fa-#{@name}"
+    end
+  end
+
+  class IconComponent < Component
+    class << self
+      attr_accessor :icon_component_class
+    end
+
+    attr_reader :text
+
+    def initialize(icon, text: nil, color: nil, size: nil)
+      @text = text
+      @color = color
+      @icon = self.class.icon_component_class.new(icon)
+    end
+
+    def classes
+      class_names("icon", "has-text-#{@color}" => @color.present?)
+    end
+  end
+end

demo/Gemfile.lock

@@ -228,6 +228,7 @@ GEM
 PLATFORMS
   aarch64-linux
   arm64-darwin-21
+  arm64-darwin-24
   x86_64-linux
 
 DEPENDENCIES

lib/bulma/view_components/engine.rb

@@ -10,11 +10,20 @@ class Engine < ::Rails::Engine
         root.join("app/components")
       ]
 
+      config.bulma_view_components = ActiveSupport::OrderedOptions.new
+
+      config.bulma_view_components.icons = :ionicons
+
       initializer "bulma_view_components.helpers" do
         ActiveSupport.on_load(:action_controller_base) do
           helper Bulma::ComponentsHelper
         end
       end
+
+      config.after_initialize do
+        # Bulma::IconComponent.icon_component_class = Bulma::IoniconsComponent
+        Bulma::IconComponent.icon_component_class = Bulma::FontAwesomeComponent
+      end
     end
   end
 end

previews/elements/icon_component_preview.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Elements::IconComponentPreview < ViewComponent::Preview
+  def default
+  end
+
+  def icon_text
+  end
+end

previews/elements/icon_component_preview/default.html.erb

@@ -0,0 +1 @@
+<%= bulma_icon :heart %>

previews/elements/icon_component_preview/icon_text.html.erb

@@ -0,0 +1 @@
+<%= bulma_icon :home, text: 'Home' %>

previews/elements/title_component_preview/subtitle.html.erb

@@ -0,0 +1,3 @@
+<%= bulma_title 'Title 1' do |c| %>
+  <%= c.with_subtitle 'Subtitle', as: :h2 %>
+<% end %>