Allow to set element definition icon

Useful if you want to distingiush elements visually.

Author: tvdeyen

app/assets/builds/alchemy/admin.css

@@ -9,6 +9,7 @@ class ElementDefinition
     extend ActiveModel::Translation
 
     attribute :name, :string
+    attribute :icon, :string, default: "alchemy/element.svg"
     attribute :unique, :boolean, default: false
     attribute :amount, :integer, default: Float::INFINITY
     attribute :taggable, :boolean, default: false

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

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

app/assets/images/alchemy/element.svg

@@ -3,6 +3,7 @@
   <details>
     <summary>
       <header>
+        <%= image_tag(element.icon, width: 18, height: 18) if element.icon %>
         <%= 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) }