utilisation de heroicon

permet de ne pas copier/coller des tags SVG pour les icones de Heroicons
2021-03-07 18:39:46 +01:00 · 2021-03-07 18:39:46 +01:00 · df5645c0ae
parent 8ac87c1303
commit df5645c0ae
10 changed files with 23 additions and 26 deletions
--- a/3
+++ b/3
@ -64,6 +64,9 @@ gem "kaminari"
 # Use ViewComponents for … view components, duh!
 gem "view_component", require: "view_component/engine"

+# Use heroicon to display SVG icons from heroicons.com
+gem "heroicon"
+
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', '>= 1.4.4', require: false

--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -1,6 +1,6 @@
 GIT
  remote: https://github.com/rails/rails.git
-  revision: 1ccf4371a9d349b78c80c31c920207a97fdd32c3
+  revision: 1c97c5b2c2b685b29ba296e7ad046b34d19d0360
  branch: main
  specs:
    actioncable (7.0.0.alpha)
@ -138,6 +138,8 @@ GEM
    globalid (0.4.2)
      activesupport (>= 4.2.0)
    hashie (4.1.0)
+    heroicon (0.2.3)
+      rails (>= 5.2)
    hotwire-rails (0.1.3)
      rails (>= 6.0.0)
      stimulus-rails
@ -286,6 +288,7 @@ DEPENDENCIES
  devise
  elasticsearch-model
  elasticsearch-rails
+  heroicon
  hotwire-rails
  kaminari
  listen (~> 3.3)
--- a/app/components/flash_notice_component.html.erb
+++ b/app/components/flash_notice_component.html.erb
@ -1,10 +1,7 @@
 <div class="rounded-md bg-green-50 p-4 mb-4">
  <div class="flex">
    <div class="flex-shrink-0">
-      <!-- Heroicon name: solid/information-circle -->
-      <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
-      </svg>
+      <%= helpers.heroicon "information-circle", variant: :solid, options: { class: "h-5 w-5 text-green-400" } %>
    </div>
    <div class="ml-3 flex-1 md:flex md:justify-between">
      <p class="text-sm text-green-700">
--- a/app/components/form_errors_component.html.erb
+++ b/app/components/form_errors_component.html.erb
@ -2,10 +2,7 @@
 <div class="rounded-md bg-red-50 p-4 my-4">
  <div class="flex">
    <div class="flex-shrink-0">
-      <!-- Heroicon name: solid/x-circle -->
-      <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
-      </svg>
+      <%= helpers.heroicon "x-circle", variant: :solid, options: { class: "h-5 w-5 text-red-400" } %>
    </div>
    <div class="ml-3">
      <h2 class="text-sm font-medium text-red-800">
--- a/app/helpers/heroicon_helper.rb
+++ b/app/helpers/heroicon_helper.rb
@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module HeroiconHelper
+  include Heroicon::Engine.helpers
+end
--- a/app/views/kaminari/_first_page.html.erb
+++ b/app/views/kaminari/_first_page.html.erb
@ -8,8 +8,5 @@
 -%>
 <%= link_to (current_page.first? ? '#' : url), rel: 'first', remote: remote, class: "paginate-page paginate-first-page" do %>
  <span class="sr-only"><%= t('views.pagination.first').html_safe %></span>
-  <!-- Heroicon name: solid/chevron-double-left -->
-  <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-    <path fill-rule="evenodd" d="M15.707 15.707a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 010 1.414zm-6 0a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 1.414L5.414 10l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
-  </svg>
+  <%= heroicon "chevron-double-left", variant: :solid, options: { class: "h-5 w-5" } %>
 <% end %>
--- a/app/views/kaminari/_last_page.html.erb
+++ b/app/views/kaminari/_last_page.html.erb
@ -8,9 +8,5 @@
 -%>
 <%= link_to (current_page.last? ? '#' : url), rel: 'last', remote: remote, class: "paginate-page paginate-last-page" do %>
  <span class="sr-only"><%= t('views.pagination.last').html_safe %></span>
-  <!-- Heroicon name: solid/chevron-double-right -->
-  <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-    <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-    <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-  </svg>
+  <%= heroicon "chevron-double-right", variant: :solid, options: { class: "h-5 w-5" } %>
 <% end %>
--- a/app/views/kaminari/_next_page.html.erb
+++ b/app/views/kaminari/_next_page.html.erb
@ -8,8 +8,5 @@
 -%>
 <%= link_to (current_page.last? ? '#' : url), rel: 'next', remote: remote, class: "paginate-page paginate-next-page" do %>
  <span class="sr-only"><%= t('views.pagination.next').html_safe %></span>
-  <!-- Heroicon name: solid/chevron-right -->
-  <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-  </svg>
+  <%= heroicon "chevron-right", variant: :solid, options: { class: "h-5 w-5" } %>
 <% end %>
--- a/app/views/kaminari/_prev_page.html.erb
+++ b/app/views/kaminari/_prev_page.html.erb
@ -8,8 +8,5 @@
 -%>
 <%= link_to (current_page.first? ? '#' : url), rel: 'prev', remote: remote, class: "paginate-page paginate-prev-page" do %>
  <span class="sr-only"><%= t('views.pagination.previous').html_safe %></span>
-  <!-- Heroicon name: solid/chevron-left -->
-  <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-    <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
-  </svg>
+  <%= heroicon "chevron-left", variant: :solid, options: { class: "h-5 w-5" } %>
 <% end %>
--- a/config/initializers/heroicon.rb
+++ b/config/initializers/heroicon.rb
@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+Heroicon.configure do |config|
+  config.variant = :solid # Options are :solid and :outline
+end