Allow to set element definition icon

Useful if you want to distingiush elements visually.

Author: tvdeyen

app/assets/builds/alchemy/admin.css

@@ -37,6 +37,7 @@ class Element < BaseRecord
       "compact",
       "deprecated",
       "hint",
+      "icon",
       "ingredients",
       "message",
       "nestable_elements",

app/assets/builds/alchemy/admin.css.map

@@ -21,13 +21,18 @@ class ElementDefinition
     attribute :message
     attribute :warning
     attribute :hint
+    attribute :icon
 
     validates :name,
       presence: true,
       format: {
         with: /\A[a-z_-]+\z/
       }
 
+    validates :icon,
+      format: {with: /\A[\w-]+\z/i},
+      if: -> { icon.is_a?(String) }
+
     delegate :blank?, to: :name
 
     class << self
@@ -151,8 +156,20 @@ def deprecation_notice
       end
     end
 
+    def icon_file
+      @_icon_file ||= File.read(icons_root_path.join("#{icon_name}.svg")).html_safe
+    end
+
+    def icon_name
+      (icon == true) ? name : icon
+    end
+
     private
 
+    def icons_root_path
+      Rails.root.join("app", "assets", "images", "alchemy", "element_icons")
+    end
+
     def hint_translation_scope
       :element_hints
     end

app/assets/images/alchemy/element.svg

@@ -57,9 +57,15 @@
       header {
         display: flex;
         width: 100%;
+        height: 18px;
         align-items: center;
         justify-content: space-between;
-        gap: var(--spacing-1);
+        gap: var(--spacing-2);
+
+        svg {
+          width: 18px;
+          height: 18px;
+        }
 
         .labels {
           display: flex;

app/models/alchemy/element.rb

@@ -3,6 +3,11 @@
   <details>
     <summary>
       <header>
+        <% if element.icon %>
+          <%= element.icon_file %>
+        <% else %>
+          <%= render_icon('draggable', style: false, class: 'element', fixed_width: false) %>
+        <% end %>
         <%= Alchemy::Element.display_name_for(element.name) %>
         <span class="labels">
           <% if element.unique %>

app/models/alchemy/element_definition.rb

@@ -10,6 +10,7 @@ module Alchemy
       subject { definition.attributes }
 
       it { is_expected.to have_key(:name) }
+      it { is_expected.to have_key(:icon) }
       it { is_expected.to have_key(:unique) }
       it { is_expected.to have_key(:amount) }
       it { is_expected.to have_key(:taggable) }
@@ -28,6 +29,14 @@ module Alchemy
       it { is_expected.to validate_presence_of(:name) }
       it { is_expected.to allow_value("article").for(:name) }
       it { is_expected.to_not allow_value("Article Element").for(:name) }
+
+      it { is_expected.to allow_value(true).for(:icon) }
+      it { is_expected.to allow_value("article").for(:icon) }
+      it { is_expected.to allow_value("Article_2").for(:icon) }
+      it { is_expected.to allow_value("article2-line").for(:icon) }
+      it { is_expected.to_not allow_value("Article Icon").for(:icon) }
+      it { is_expected.to_not allow_value("article.svg").for(:icon) }
+      it { is_expected.to_not allow_value("Article.png").for(:icon) }
     end
 
     it_behaves_like "having a hint" do
@@ -90,6 +99,26 @@ module Alchemy
       end
     end
 
+    describe "#icon_name" do
+      subject(:icon_name) { definition.icon_name }
+
+      context "with icon attribute being true" do
+        let(:definition) { described_class.new(name: "article", icon: true) }
+
+        it "returns the name attribute" do
+          expect(icon_name).to eq("article")
+        end
+      end
+
+      context "with icon attribute being a string" do
+        let(:definition) { described_class.new(icon: "article-line") }
+
+        it "returns the icon attribute" do
+          expect(icon_name).to eq("article-line")
+        end
+      end
+    end
+
     describe "#ingredients" do
       let(:definition) { described_class.new }