Add heroicons/outline before svg (#2783)

* Add heroicons/outline before svg

* wip

* Move icons to avo

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update rubocop

* wip

app/components/avo/actions_component.html.erb

@@ -11,7 +11,7 @@
  color: @color,
  size: size,
  class: "focus:outline-none",
- icon: 'arrow-circle-right',
+ icon: "avo/arrow-circle-right",
  icon_class: 'transform rotate-90',
  'data-action': "click->toggle#togglePanel",
  'data-actions-dropdown-button': @resource.model_key do %>

app/components/avo/fields/common/files/controls_component.html.erb

@@ -1,7 +1,7 @@
 <div class="flex">
  <% if can_download_file? %>
  <%= a_link helpers.main_app.rails_blob_path(file, only_path: true, disposition: :attachment),
- icon: 'heroicons/outline/download',
+ icon: "heroicons/outline/download",
  color: :primary,
  download: true,
  class: 'text-center',
@@ -14,7 +14,7 @@
 <div>
  <% if can_delete_file? %>
  <%= a_link destroy_path,
- icon: 'heroicons/outline/trash',
+ icon: "avo/trash",
  color: :red,
  compact: true,
  size: :xs,

app/components/avo/fields/common/files/view_type/grid_item_component.html.erb

@@ -10,7 +10,7 @@
  <% else %>
  <div class="relative flex flex-col justify-evenly items-center px-2 rounded-lg border bg-white border-gray-500 min-h-24">
  <div class="flex flex-col justify-center items-center w-full">
- <%= helpers.svg 'document-text', class: 'h-10 text-gray-600 mb-2' %>
+ <%= helpers.svg "heroicons/outline/document-text", class: 'h-10 text-gray-600 mb-2' %>
  </div>
  </div>
  <% end %>

app/components/avo/fields/common/key_value_component.html.erb

@@ -25,7 +25,7 @@
  class="cursor-not-allowed"
  <% end %>
  >
- <%= svg 'plus-circle', class: 'text-gray-400 h-5 hover:text-gray-500' %>
+ <%= svg "heroicons/outline/plus-circle", class: 'text-gray-400 h-5 hover:text-gray-500' %>
  </a>
  </div>
  <% end %>

app/components/avo/fields/preview_field/index_component.html.erb

@@ -5,6 +5,6 @@
  controller: "preview",
  preview_url_value: helpers.preview_resource_path(resource: @resource, turbo_frame: :preview_modal),
  } do %>
- <%= helpers.svg("magnifying-glass-circle", class: "block h-6 text-gray-600") %>
+ <%= helpers.svg("heroicons/outline/magnifying-glass-circle", class: "block h-6 text-gray-600") %>
  <% end %>
 <% end %>

app/components/avo/fields/tiptap_field/edit_component.html.erb

@@ -20,45 +20,45 @@
  <%= content_tag :div, class: "tiptap__toolbar-area" do %>
  <%= content_tag :div, class: "tiptap__button-group" do %>
  <%= button_tag type: "button", class: "tiptap__button tiptap__button--bold", data: { action: "click->tiptap-field#bold" } do %>
- <%= helpers.svg("editor-bold") %>
+ <%= helpers.svg("avo/editor-bold") %>
  <% end %>
 
  <%= button_tag type: "button", class: "tiptap__button tiptap__button--italic", data: { action: "click->tiptap-field#italic" } do %>
- <%= helpers.svg("editor-italic") %>
+ <%= helpers.svg("avo/editor-italic") %>
  <% end %>
 
  <%= button_tag type: "button", class: "tiptap__button tiptap__button--underline", data: { action: "click->tiptap-field#underline" } do %>
- <%= helpers.svg("editor-underline") %>
+ <%= helpers.svg("avo/editor-underline") %>
  <% end %>
 
  <%= button_tag type: "button", class: "tiptap__button tiptap__button--strike", data: { action: "click->tiptap-field#strike" } do %>
- <%= helpers.svg("editor-strike") %>
+ <%= helpers.svg("avo/editor-strike") %>
  <% end %>
  <% end %>
 
  <%= content_tag :div, class: "tiptap__button-group" do %>
  <%= button_tag type: "button", class: "tiptap__button tiptap__button--ul", data: { action: "click->tiptap-field#unorderedList" } do %>
- <%= helpers.svg("editor-list") %>
+ <%= helpers.svg("avo/editor-list") %>
  <% end %>
 
  <%= button_tag type: "button", class: "tiptap__button tiptap__button--ol", data: { action: "click->tiptap-field#orderedList" } do %>
- <%= helpers.svg("editor-ordered-list") %>
+ <%= helpers.svg("avo/editor-ordered-list") %>
  <% end %>
  <% end %>
 
  <%= content_tag :div, class: "tiptap__button-group" do %>
  <%= button_tag type: "button", disabled: true, class: "tiptap__button tiptap__button--link", data: { action: "click->tiptap-field#toggleLinkArea" } do %>
- <%= helpers.svg("editor-link") %>
+ <%= helpers.svg("avo/editor-link") %>
  <% end %>
  <% end %>
 
  <%= content_tag :div, class: "tiptap__button-group tiptap__link-area hidden" do %>
  <%= text_field_tag nil, nil, class: "tiptap__link-field", placeholder: "Enter URL here ...", data: { action: "keydown->tiptap-field#preventEnter" } %>
  <%= button_tag type: "button", class: "tiptap__button", data: { action: "click->tiptap-field#setLink" } do %>
- <%= helpers.svg("check-circle") %>
+ <%= helpers.svg("heroicons/outline/check-circle") %>
  <% end %>
  <%= button_tag type: "button", class: "tiptap__button tiptap__link-button--unset", data: { action: "click->tiptap-field#unsetLink" } do %>
- <%= helpers.svg("trash") %>
+ <%= helpers.svg("avo/trash") %>
  <% end %>
  <% end %>
  <% end %>

app/components/avo/filters_component.html.erb

@@ -3,7 +3,7 @@
  <%= a_button class: 'focus:outline-none',
  color: :primary,
  size: :sm,
- icon: 'filter',
+ icon: "avo/filter",
  title: t('avo.click_to_reveal_filters'),
  'data-button': 'resource-filters',
  'data-action': 'click->toggle#togglePanel',

app/components/avo/index/resource_controls_component.rb

@@ -86,7 +86,7 @@ def referrer_path
  def render_edit_button(control)
  return unless can_edit?
 
- link_to helpers.svg("edit", class: svg_classes),
+ link_to helpers.svg("avo/edit", class: svg_classes),
  edit_path,
  class: "flex items-center",
  title: control.title,
@@ -101,7 +101,7 @@ def render_edit_button(control)
  def render_show_button(control)
  return unless can_view?
 
- link_to helpers.svg("eye", class: svg_classes),
+ link_to helpers.svg("heroicons/outline/eye", class: svg_classes),
  show_path,
  class: "flex items-center",
  title: control.title,
@@ -123,7 +123,7 @@ def render_delete_button(control)
  a_button url: helpers.resource_path(record: @resource.record, resource: @resource),
  style: :icon,
  color: :gray,
- icon: "trash",
+ icon: "avo/trash",
  form_class: "flex flex-col sm:flex-row sm:inline-flex",
  title: control.title,
  method: :delete,

app/components/avo/panel_component.html.erb

@@ -3,7 +3,7 @@
  <div data-target="panel-header" class="mb-4">
  <% if display_breadcrumbs? %>
  <div class="breadcrumbs mb-2">
- <%= helpers.render_avo_breadcrumbs(separator: helpers.svg('chevron-right', class: 'inline-block h-3 stroke-current relative top-[-1px] ml-1' )) if Avo.configuration.display_breadcrumbs %>
+ <%= helpers.render_avo_breadcrumbs(separator: helpers.svg("heroicons/outline/chevron-right", class: 'inline-block h-3 stroke-current relative top-[-1px] ml-1' )) if Avo.configuration.display_breadcrumbs %>
  </div>
  <% end %>
  <div class="flex-1 flex flex-col xl:flex-row justify-between gap-1">

app/components/avo/resource_component.rb

@@ -130,7 +130,7 @@ def render_back_button(control)
  style: :text,
  title: control.title,
  data: {tippy: tippy},
- icon: "arrow-left" do
+ icon: "heroicons/outline/arrow-left" do
  control.label
  end
  end
@@ -163,7 +163,7 @@ def render_delete_button(control)
  a_link destroy_path,
  style: :text,
  color: :red,
- icon: "trash",
+ icon: "avo/trash",
  form_class: "flex flex-col sm:flex-row sm:inline-flex",
  title: control.title,
  data: {
@@ -185,7 +185,7 @@ def render_save_button(control)
  style: :primary,
  loading: true,
  type: :submit,
- icon: "save" do
+ icon: "avo/save" do
  control.label
  end
  end
@@ -198,7 +198,7 @@ def render_edit_button(control)
  style: :primary,
  title: control.title,
  data: {tippy: control.title ? :tooltip : nil},
- icon: "edit" do
+ icon: "avo/edit" do
  control.label
  end
  end
@@ -207,7 +207,7 @@ def render_detach_button(control)
  return unless is_a_related_resource? && can_detach?
 
  a_link detach_path,
- icon: "detach",
+ icon: "avo/detach",
  form_class: "flex flex-col sm:flex-row sm:inline-flex",
  style: :text,
  data: {

app/components/avo/sidebar_component.html.erb

@@ -21,7 +21,7 @@
 
  <% if dashboards.present? %>
  <div>
- <%= render Avo::Sidebar::HeadingComponent.new label: t('avo.dashboards'), icon: helpers.svg('dashboards', class: 'h-4') %>
+ <%= render Avo::Sidebar::HeadingComponent.new label: t('avo.dashboards'), icon: helpers.svg("avo/dashboards", class: 'h-4') %>
 
  <div class="w-full space-y-1">
  <% dashboards.sort_by { |r| r.navigation_label }.each do |dashboard| %>
@@ -32,7 +32,7 @@
  <% end %>
 
  <div>
- <%= render Avo::Sidebar::HeadingComponent.new label: t('avo.resources'), icon: helpers.svg('resources', class: 'h-4') %>
+ <%= render Avo::Sidebar::HeadingComponent.new label: t('avo.resources'), icon: helpers.svg("avo/resources", class: 'h-4') %>
 
  <div class="w-full space-y-1">
  <% resources.sort_by { |r| r.navigation_label }.each do |resource| %>
@@ -43,7 +43,7 @@
 
  <% if tools.present? %>
  <div>
- <%= render Avo::Sidebar::HeadingComponent.new label: t('avo.tools'), icon: helpers.svg('tools', class: 'h-4') %>
+ <%= render Avo::Sidebar::HeadingComponent.new label: t('avo.tools'), icon: helpers.svg("avo/tools", class: 'h-4') %>
 
  <div class="w-full space-y-1">
  <% tools.each do |partial| %>

app/components/avo/sidebar_profile_component.html.erb

@@ -18,7 +18,7 @@
  </div>
  <div class="relative" data-controller="toggle">
  <a class="flex items-center h-full cursor-pointer" data-control="profile-dots" data-action="click->toggle#togglePanel">
- <%= helpers.svg 'three-dots', class: 'h-4' %>
+ <%= helpers.svg "avo/three-dots", class: 'h-4' %>
  </a>
  <div
  class="hidden absolute flex flex-col inset-auto right-0 -mt-12 bg-white rounded min-w-[200px] shadow-context -translate-y-full z-40"
@@ -50,7 +50,7 @@
  },
  class: 'flex-1' do |form| %>
  <%= form.button turbo_confirm: t('avo.are_you_sure'), class: "flex-1 flex items-center justify-center bg-white text-left cursor-pointer text-red-600 font-semibold hover:bg-red-100 block px-4 py-1 w-full py-3 text-center rounded w-full" do %>
- <%= helpers.svg 'logout', class: 'h-4 mr-1' %> <%= t('avo.sign_out') %>
+ <%= helpers.svg "avo/logout", class: 'h-4 mr-1' %> <%= t('avo.sign_out') %>
  <% end %>
  <% end %>
  <% end %>

app/components/avo/views/resource_index_component.rb

@@ -151,7 +151,7 @@ def render_dynamic_filters_button
 
  a_button size: :sm,
  color: :primary,
- icon: "filter",
+ icon: "avo/filter",
  data: {
  controller: "avo-filters",
  action: "click->avo-filters#toggleFiltersArea",

app/views/avo/debug/_valid_indicator.html.erb

@@ -1,9 +1,9 @@
 <% if valid %>
  <span class="text-green-700 text-xl">
- <%= svg "check-badge", class: "h-5 inline -mt-1 relative" %> <span>Valid</span>
+ <%= svg "heroicons/outline/check-badge", class: "h-5 inline -mt-1 relative" %> <span>Valid</span>
  </span>
 <% else %>
  <span class="text-orange-700 text-xl">
- <%= svg "exclamation-circle", class: "h-5 inline -mt-1 relative" %> <span>Invalid</span>
+ <%= svg "heroicons/outline/exclamation-circle", class: "h-5 inline -mt-1 relative" %> <span>Invalid</span>
  </span>
 <% end %>

app/views/avo/home/failed_to_load.html.erb

@@ -6,7 +6,7 @@
 %>
  <div class="relative flex-1 py-4">
  <div class="relative block text-gray-300 h-64 w-full">
- <%= svg 'failed_to_load', class: "#{classes} h-52 text-gray-400" %>
+ <%= svg "avo/failed_to_load", class: "#{classes} h-52 text-gray-400" %>
  </div>
  <div class="relative block text-center text-lg text-gray-400 font-semibold pb-6"><%= label %> <span class="border-b-2 border-dashed"><%= params[:turbo_frame].to_s.humanize.downcase if params[:turbo_frame].present? %></span> frame</div>
  <% if Rails.env.development? && src_url %>

app/views/avo/partials/_custom_tools_alert.html.erb

@@ -1,7 +1,7 @@
 <% if @custom_tools_alert_visible %>
  <div class="w-full inset-auto bottom-0 z-50 mb-4 opacity-75 hover:opacity-100 transition-opacity duration-150">
  <a href="https://avohq.io/pricing" target="_blank" class="rounded bg-orange-700 text-white py-2 px-4 text-sm block items-center flex leading-tight">
- <%= svg "exclamation", class: "h-6 inline mr-2 text-bold flex-shrink-0 mr-1" %> Warning. <%= @custom_tools_alert_visible %> This page will not be visible in a production environment.
+ <%= svg "avo/exclamation", class: "h-6 inline mr-2 text-bold flex-shrink-0 mr-1" %> Warning. <%= @custom_tools_alert_visible %> This page will not be visible in a production environment.
  </a>
  </div>
 <% end %>
@@ -13,7 +13,7 @@
  %>
  <div class="w-full inset-auto bottom-0 z-50 mb-4 opacity-75 hover:opacity-100 transition-opacity duration-150">
  <a href="<%= url %>" target="<%= target %>" class="rounded bg-orange-700 text-white py-2 px-4 text-sm items-center flex leading-tight space-x-2">
- <%= svg "exclamation", class: "h-6 inline mr-2 text-bold flex-shrink-0 mr-1" %>
+ <%= svg "avo/exclamation", class: "h-6 inline mr-2 text-bold flex-shrink-0 mr-1" %>
  <div>
  <%= simple_format message %>
  </div>
@@ -22,7 +22,7 @@
  <% elsif error.is_a? String %>
  <div class="w-full inset-auto bottom-0 z-50 mb-4 opacity-75 hover:opacity-100 transition-opacity duration-150">
  <div class="rounded bg-orange-700 text-white py-2 px-4 text-sm items-center flex leading-tight space-x-2">
- <%= svg "exclamation", class: "h-6 inline mr-2 text-bold flex-shrink-0 mr-1" %>
+ <%= svg "avo/exclamation", class: "h-6 inline mr-2 text-bold flex-shrink-0 mr-1" %>
  <div><%= simple_format error %></div>
  </div>
  </div>

app/views/avo/partials/_navbar.html.erb

@@ -1,8 +1,8 @@
 <%= content_tag :div, class: class_names("fixed bg-white p-2 w-full flex flex-shrink-0 items-center z-[100] px-4 lg:px-4 border-b space-x-4 lg:space-x-0 h-16", {"print:hidden": Avo.configuration.hide_layout_when_printing}) do %>
  <div class="flex items-center space-x-2 w-auto lg:w-64 flex-shrink-0 h-full">
  <div>
- <%= a_button class: 'lg:hidden', icon: 'menu', size: :xs, compact: true, style: :text, data: { action: 'click->sidebar#toggleSidebarOnMobile' } %>
- <%= a_button class: 'hidden lg:block', icon: 'menu', size: :xs, compact: true, style: :text, data: { action: 'click->sidebar#toggleSidebar' } %>
+ <%= a_button class: 'lg:hidden', icon: "avo/menu", size: :xs, compact: true, style: :text, data: { action: 'click->sidebar#toggleSidebarOnMobile' } %>
+ <%= a_button class: 'hidden lg:block', icon: "avo/menu", size: :xs, compact: true, style: :text, data: { action: 'click->sidebar#toggleSidebar' } %>
  </div>
  <%= render partial: "avo/partials/logo" %>
  </div>

app/views/avo/partials/_sortable_component.html.erb

@@ -1,12 +1,12 @@
 <%
- icon = 'selector'
+ icon = "avo/selector"
 
  if params[:sort_by] == field.id.to_s
  case params[:sort_direction]
  when 'asc'
- icon = 'sort-ascending'
+ icon = "avo/sort-ascending"
  when 'desc'
- icon = 'sort-descending'
+ icon = "avo/sort-descending"
  end
  end
 %>

app/views/avo/partials/_view_toggle_button.html.erb

@@ -3,12 +3,12 @@
  info = {
  table: {
  new_view_type: 'table',
- new_icon: 'table-view-type',
+ new_icon: "avo/table-view-type",
  translation_key: 'avo.table_view',
  },
  grid: {
  new_view_type: 'grid',
- new_icon: 'grid-view-type',
+ new_icon: "avo/grid-view-type",
  translation_key: 'avo.grid_view',
  },
  list: {
@@ -17,7 +17,7 @@
  },
  map: {
  new_view_type: 'map',
- new_icon: 'map-view-type',
+ new_icon: "avo/map-view-type",
  translation_key: 'avo.map_view',
  },
  }

app/views/avo/private/_links_and_buttons.html.erb

@@ -28,7 +28,7 @@
  %>
  <%
  a_button_or_link = "a_#{entity}"
- args = {icon: 'arrow-left', style: style, color: color, size: size, class: extra_classes, disabled: state == :disabled}
+ args = {icon: "heroicons/outline/arrow-left", style: style, color: color, size: size, class: extra_classes, disabled: state == :disabled}
  %>
  <% if entity == :link %>
  <div>
@@ -43,7 +43,7 @@
  <% end %>
  </div>
  <div>
- <%= a_button icon: 'bell', style: style, color: color, size: size, class: extra_classes, disabled: state == :disabled %>
+ <%= a_button icon: "avo/bell", style: style, color: color, size: size, class: extra_classes, disabled: state == :disabled %>
  </div>
  <% end %>
  <% end %>

app/views/avo/private/design.html.erb

@@ -1,19 +1,19 @@
 <div class="flex flex-col">
  <%= render Avo::PanelComponent.new(name: 'Welcome to Avo', description: 'This page is visible only in development. It will be hidden in other environments.') do |c| %>
  <% c.with_tools do %>
- <%= a_link('/admin', icon: 'arrow-left', color: :green, style: :primary, is_link: true) do %>
+ <%= a_link('/admin', icon: "heroicons/outline/arrow-left", color: :green, style: :primary, is_link: true) do %>
  Primary
  <% end %>
 
- <%= a_link('/admin', icon: 'arrow-left', style: :outline, is_link: true) do %>
+ <%= a_link('/admin', icon: "heroicons/outline/arrow-left", style: :outline, is_link: true) do %>
  Outline
  <% end %>
 
- <%= a_link('/admin', icon: 'arrow-left', style: :outline, color: :red, is_link: true) do %>
+ <%= a_link('/admin', icon: "heroicons/outline/arrow-left", style: :outline, color: :red, is_link: true) do %>
  Red
  <% end %>
 
- <%= a_link('/admin', icon: 'arrow-left', style: :text, color: :orange, is_link: true) do %>
+ <%= a_link('/admin', icon: "heroicons/outline/arrow-left", style: :text, color: :orange, is_link: true) do %>
  Text
  <% end %>
  <% end %>