Use svg for icons

This introduces a new <alchemy-icon> custom element which you can use as replacement for <i> tags.
AlchemyCMS · Mar 12, 2024 · 96ff66d · 96ff66d
1 parent 63d5474
commit 96ff66d
Show file tree

Hide file tree

Showing 85 changed files with 651 additions and 381 deletions.
diff --git a/app/assets/javascripts/alchemy/alchemy.dialog.js.coffee b/app/assets/javascripts/alchemy/alchemy.dialog.js.coffee
@@ -168,7 +168,7 @@ class window.Alchemy.Dialog
     @dialog_body = $('<div class="alchemy-dialog-body" />')
     @dialog_header = $('<div class="alchemy-dialog-header" />')
     @dialog_title = $('<div class="alchemy-dialog-title" />')
-    @close_button = $('<a class="alchemy-dialog-close"><i class="icon ri-close-line ri-fw" /></a>')
+    @close_button = $('<a class="alchemy-dialog-close"><alchemy-icon name="close"></alchemy-icon></a>')
     @dialog_title.text(@options.title)
     @dialog_header.append(@dialog_title)
     @dialog_header.append(@close_button)
@@ -269,9 +269,10 @@ window.Alchemy.watchForDialogs = (scope = '#alchemy') ->
 # Returns a Remix icon for given message type
 #
 window.Alchemy.messageIcon = (messageType) ->
-  icon_class = switch messageType
+  icon_name = switch messageType
     when "warning", "warn", "alert" then "alert"
     when "notice" then "check"
+    when "info" then "information"
     when "error" then "bug"
     else messageType
-  "<i class=\"icon ri-#{icon_class}-line ri-fw\" />"
+  "<alchemy-icon name=\"#{icon_name}\"></alchemy-icon>"
diff --git a/app/assets/javascripts/alchemy/alchemy.elements_window.js.coffee b/app/assets/javascripts/alchemy/alchemy.elements_window.js.coffee
@@ -14,7 +14,7 @@ Alchemy.ToolbarButton = (options) ->
     e.preventDefault()
     options.onClick(e)
     return
-  $lnk.append "<i class='icon ri-#{options.iconClass} ri-fw' />"
+  $lnk.append "<alchemy-icon name='#{options.iconClass}' icon-style='#{options.iconStyle || "line"}'></alchemy-icon>"
   $btn.append $lnk
   $btn
 
@@ -93,14 +93,14 @@ Alchemy.ElementsWindow =
   toggleButton: ->
     if @hidden
       @button.find('label').text(@options.texts.showElements)
-      @button.find('.icon').removeClass("ri-menu-unfold-line").addClass("ri-menu-fold-line")
+      @button.find('alchemy-icon').attr("name", "menu-fold")
       @button.off('click')
       @button.on "click", =>
         @show()
         false
     else
       @button.find('label').text(@options.texts.hideElements)
-      @button.find('.icon').removeClass("ri-menu-fold-line").addClass("ri-menu-unfold-line")
+      @button.find('alchemy-icon').attr("name", "menu-unfold")
       @button.off('click')
       @button.on "click", =>
         @hide()

diff --git a/app/assets/javascripts/alchemy/alchemy.growler.js.coffee b/app/assets/javascripts/alchemy/alchemy.growler.js.coffee
@@ -5,6 +5,8 @@ Alchemy.Growler =
   build: (message, flash_type) ->
     $flash_container = $("<div class=\"flash #{flash_type}\" />")
     $flash_container.append Alchemy.messageIcon(flash_type)
+    if flash_type == "error"
+      $flash_container.append "<alchemy-icon name=\"close\"></alchemy-icon>"
     $flash_container.append message
     $("#flash_notices").append $flash_container
     $("#flash_notices").show()

diff --git a/app/assets/javascripts/alchemy/alchemy.image_overlay.coffee b/app/assets/javascripts/alchemy/alchemy.image_overlay.coffee
@@ -42,7 +42,7 @@ class window.Alchemy.ImageOverlay extends Alchemy.Dialog
     @dialog = $('<div class="alchemy-image-overlay-dialog" />')
     @dialog_body = $('<div class="alchemy-image-overlay-body" />')
     @close_button = $('<a class="alchemy-image-overlay-close">
-      <i class="icon ri-close-line ri-fw"></i>
+      <alchemy-icon name="close" size="xl"></alchemy-icon>
     </a>')
     @dialog.append(@close_button)
     @dialog.append(@dialog_body)

diff --git a/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee b/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee
@@ -49,7 +49,7 @@ Alchemy.PreviewWindow =
 
   _hideSpinner: ->
     @spinner.stop()
-    @reload.html('<i class="icon ri-refresh-line ri-fw"></i>')
+    @reload.html('<svg class="icon"><use xlink:href="/assets/remixicon.symbol.svg#ri-refresh-line"></svg>')
 
   _bindReloadButton: ->
     $reload = $('#reload_preview_button')

diff --git a/app/assets/javascripts/alchemy/templates/node_folder.hbs b/app/assets/javascripts/alchemy/templates/node_folder.hbs
@@ -1,3 +1,3 @@
 <a class="node_folder" data-record-id="{{ node.id }}" data-record-type="{{ node.type }}">
-  <i class="icon ri-arrow-{{#if node.folded }}right{{else}}down{{/if}}-s-line ri-fw"></i>
+  <alchemy-icon name="arrow-{{#if node.folded }}right{{else}}down{{/if}}-s"></alchemy-icon>
 </a>
diff --git a/app/assets/javascripts/alchemy/templates/page.hbs b/app/assets/javascripts/alchemy/templates/page.hbs
@@ -1,6 +1,6 @@
 <div class="page-select--page">
   <div class="page-select--top">
-    <i class="icon ri-file-3-line"></i>
+    <alchemy-icon name="file-3"></alchemy-icon>
     <span class="page-select--page-name">
       {{ page.name }}
     </span>

diff --git a/app/assets/javascripts/alchemy/templates/page_folder.hbs b/app/assets/javascripts/alchemy/templates/page_folder.hbs
@@ -1,3 +1,3 @@
 <a class="page_folder icon_button" data-page-id="{{ page.id }}">
-  <i class="icon ri-arrow-{{#if page.folded }}right{{else}}down{{/if}}-s-line ri-fw"></i>
+  <alchemy-icon name="arrow-{{#if page.folded }}right{{else}}down{{/if}}-s"></alchemy-icon>
 </a>
diff --git a/app/assets/stylesheets/alchemy/_custom-properties.scss b/app/assets/stylesheets/alchemy/_custom-properties.scss
@@ -5,6 +5,14 @@
   --spacing-3: 12px;
   --spacing-4: 16px;
 
+  // Icons
+  --icon-size-xs: 0.75rem;
+  --icon-size-sm: 0.875rem;
+  --icon-size-1x: 1rem;
+  --icon-size-md: 1.3rem;
+  --icon-size-xl: 1.5rem;
+  --icon-size-xxl: 1.6rem;
+
   // Font Families
   --font-mono: Menlo, Monaco, "Bitstream Vera Sans Mono", "Lucida Console",
     Terminal, monospace;
@@ -55,6 +63,7 @@
   --color-grey_dark: hsl(0deg, 0%, 40%);
   --color-grey_very_dark: hsl(0deg, 0%, 20%);
   --color-text: hsla(224, 22.7%, 25.9%, 0.8);
+  --color-icon: hsla(224, 22.7%, 25.9%, 0.75);
 }
 
 .alchemy-light {

diff --git a/app/assets/stylesheets/alchemy/_mixins.scss b/app/assets/stylesheets/alchemy/_mixins.scss
@@ -150,7 +150,9 @@
   $margin: 2 * $default-margin 0,
   $padding: $default-padding 3 * $default-padding
 ) {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: $default-padding;
   vertical-align: middle;
   padding: $padding;
   margin: $margin;
@@ -168,11 +170,12 @@
   @include label-base($margin: $margin, $padding: $padding);
 
   &:before {
-    content: $ri-price-tag-3-line;
-    font-family: "remixicon";
-    font-weight: 400;
-    font-size: 1em;
-    padding-right: $default-padding;
+    display: inline-block;
+    content: "";
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$icon-color}"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg>')
+      no-repeat center;
+    width: 1rem;
+    height: 1rem;
   }
 
   &:focus {

diff --git a/app/assets/stylesheets/alchemy/buttons.scss b/app/assets/stylesheets/alchemy/buttons.scss
@@ -38,7 +38,7 @@ input.button {
     .icon {
       font-weight: normal;
       margin-right: $default-margin;
-      color: inherit;
+      fill: currentColor;
     }
   }
 
@@ -76,15 +76,14 @@ input.button {
   }
 
   .icon {
-    color: inherit;
-    transition: color 250ms;
+    transition: fill 250ms;
   }
 
   &.disabled,
   &[disabled] {
     pointer-events: none;
 
-    i {
+    svg {
       opacity: 0.3;
     }
 

diff --git a/app/assets/stylesheets/alchemy/dashboard.scss b/app/assets/stylesheets/alchemy/dashboard.scss
@@ -68,7 +68,7 @@
     }
 
     .icon {
-      color: inherit;
+      fill: currentColor;
     }
   }
 

diff --git a/app/assets/stylesheets/alchemy/dialogs.scss b/app/assets/stylesheets/alchemy/dialogs.scss
@@ -147,13 +147,10 @@ $dialog-transition-duration: 150ms;
 .alchemy-image-overlay-close,
 .alchemy-dialog-close {
   cursor: pointer;
-}
-
-.alchemy-dialog-close {
-  color: inherit;
+  height: 16px;
 
   .icon {
-    color: inherit;
+    fill: currentColor;
   }
 }
 

diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss
@@ -78,10 +78,16 @@ alchemy-tinymce {
   white-space: nowrap;
   text-overflow: ellipsis;
   transition: color $transition-duration;
+  line-height: 1;
+  max-width: 85%;
+
+  .hidden & {
+    max-width: 65%;
+  }
 
   .preview_text_quote {
     font-size: $small-font-size;
-    line-height: 15px;
+    margin-left: $default-margin / 2;
   }
 }
 
@@ -109,7 +115,11 @@ alchemy-tinymce {
   color: inherit;
   box-shadow: none;
   padding: 0;
-  margin: 0;
+  margin: 0 0 0 auto;
+
+  .hidden & {
+    margin-left: unset;
+  }
 
   &:hover {
     &:not(:focus):not(:active) {
@@ -155,7 +165,15 @@ alchemy-tinymce {
       background-color: transparent;
 
       .element-hidden-icon {
-        display: inline;
+        display: inline-flex;
+        align-items: center;
+        gap: $default-padding;
+        margin-left: auto;
+      }
+
+      .element-hidden-label {
+        line-height: 1;
+        font-size: $small-font-size;
       }
     }
   }
@@ -290,10 +308,6 @@ alchemy-tinymce {
 
     &:not(.folded) .element-toggle {
       pointer-events: none;
-
-      i:before {
-        content: $ri-more-2-line;
-      }
     }
 
     .element-body {
@@ -353,6 +367,8 @@ alchemy-tinymce {
   }
 
   .autocomplete_tag_list {
+    display: block;
+    margin-top: $default-padding;
     padding: $default-padding 0;
 
     label {
@@ -397,8 +413,8 @@ alchemy-tinymce {
   }
 
   .icon {
-    color: inherit;
-    transition: color $transition-duration;
+    fill: currentColor;
+    transition: fill $transition-duration;
   }
 }
 
@@ -414,19 +430,24 @@ alchemy-tinymce {
   gap: $default-padding;
   height: $element-toolbar-height;
   border-top: 1px solid $medium-gray;
+  border-bottom: 1px solid $medium-gray;
 
   .is-fixed & {
     border-top-width: 0;
   }
 
-  border-bottom: 1px solid $medium-gray;
+  .icon_button {
+    width: $icon-button-medium-width;
+    height: $icon-button-medium-height;
+  }
 }
 
 alchemy-publish-element-button {
   display: inline-flex;
   align-items: center;
   margin-left: auto;
   margin-right: $default-margin;
+  line-height: 1;
 
   sl-switch {
     --thumb-size: 10px;
@@ -465,10 +486,6 @@ alchemy-publish-element-button {
   }
 
   &[open] {
-    .ingredient-group-expand::before {
-      content: $ri-arrow-down-s-line;
-    }
-
     > :not(summary) {
       box-sizing: border-box;
     }
@@ -712,7 +729,10 @@ alchemy-publish-element-button {
   border-radius: 0 $default-border-radius $default-border-radius 0;
 
   a {
-    text-align: center;
+    display: inline-flex;
+    padding: $default-padding;
+    justify-content: center;
+    align-items: center;
     text-decoration: none;
     width: 24px;
   }
@@ -829,7 +849,7 @@ select.long {
   }
 
   label {
-    display: block;
+    display: flex;
     margin: $default-margin 0;
     font-size: $small-font-size;
     line-height: 15px;
@@ -963,18 +983,26 @@ textarea.has_tinymce {
   background-color: var(--color-yellow_light);
 }
 
-.ingredient-date--label,
+label.ingredient-date--label,
 .edit-ingredient-anchor-link {
+  display: inline-flex;
+  align-items: center;
   position: absolute;
-  right: 2 * $default-padding;
-  bottom: 15px;
+  bottom: 3 * $default-padding;
   margin: 0 !important;
 }
 
+label.ingredient-date--label {
+  padding: $default-padding;
+  right: 5px;
+}
+
 .edit-ingredient-anchor-link {
   right: $default-padding;
 
-  > a {
+  a {
+    display: inline-flex;
+    align-items: center;
     padding: $default-padding;
   }
 

diff --git a/app/assets/stylesheets/alchemy/filter_field.scss b/app/assets/stylesheets/alchemy/filter_field.scss
@@ -2,7 +2,7 @@
   position: relative;
   margin: $form-field-margin;
 
-  > .icon {
+  > alchemy-icon {
     position: absolute;
     left: 8px;
     top: 50%;