chore: migrate heroicons to new tailwind bundle

assets/css/components/avatar.css

@@ -21,23 +21,23 @@
 /* Avatar - sizes */
 
 .atomic-avatar--xs {
-  @apply h-8 w-8 text-xs;
+  @apply size-8 text-xs;
 }
 
 .atomic-avatar--sm {
-  @apply h-12 w-12 text-lg;
+  @apply size-12 text-lg;
 }
 
 .atomic-avatar--md {
-  @apply h-16 w-16 text-lg;
+  @apply size-16 text-lg;
 }
 
 .atomic-avatar--lg {
-  @apply h-20 w-20 text-4xl;
+  @apply size-20 text-4xl;
 }
 
 .atomic-avatar--xl {
-  @apply h-24 w-24 text-4xl;
+  @apply size-24 text-4xl;
 }
 
 /* Avatar - colors */

assets/tailwind.config.js

@@ -1,6 +1,9 @@
 const colors = require("tailwindcss/colors");
 const plugin = require('tailwindcss/plugin');
 
+const fs = require("fs");
+const path = require("path");
+
 module.exports = {
   darkMode: 'selector',
   content: [
@@ -25,23 +28,23 @@ module.exports = {
       },
       keyframes: {
         wave: {
-            '0%': { transform: 'rotate(0.0deg)' },
-            '15%': { transform: 'rotate(14.0deg)' },
-            '30%': { transform: 'rotate(-8.0deg)' },
-            '40%': { transform: 'rotate(14.0deg)' },
-            '50%': { transform: 'rotate(-4.0deg)' },
-            '60%': { transform: 'rotate(10.0deg)' },
-            '70%': { transform: 'rotate(0.0deg)' },
-            '100%': { transform: 'rotate(0.0deg)' },
+          '0%': { transform: 'rotate(0.0deg)' },
+          '15%': { transform: 'rotate(14.0deg)' },
+          '30%': { transform: 'rotate(-8.0deg)' },
+          '40%': { transform: 'rotate(14.0deg)' },
+          '50%': { transform: 'rotate(-4.0deg)' },
+          '60%': { transform: 'rotate(10.0deg)' },
+          '70%': { transform: 'rotate(0.0deg)' },
+          '100%': { transform: 'rotate(0.0deg)' },
         },
         progress: {
-            '0%': { width: '0%' },
-            '100%': { width: '100%' },
+          '0%': { width: '0%' },
+          '100%': { width: '100%' },
         }
       },
       animation: {
-          wave: 'wave 1.5s infinite',
-          progress: 'progress 5s linear 1'
+        wave: 'wave 1.5s infinite',
+        progress: 'progress 5s linear 1'
       },
       backgroundSize: {
         '75': '75%'
@@ -50,9 +53,55 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/forms'),
+
+    // Allows prefixing tailwind classes with LiveView classes to add rules
+    // only when LiveView classes are applied, for example:
+    //
+    //     <div class="phx-click-loading:animate-ping">
+    //
     plugin(({addVariant}) => addVariant('phx-no-feedback', ['&.phx-no-feedback', '.phx-no-feedback &'])),
     plugin(({addVariant}) => addVariant('phx-click-loading', ['&.phx-click-loading', '.phx-click-loading &'])),
     plugin(({addVariant}) => addVariant('phx-submit-loading', ['&.phx-submit-loading', '.phx-submit-loading &'])),
-    plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &']))
+    plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &'])),
+
+    // Embeds Heroicons (https://heroicons.com) into app.css bundle
+    plugin(function({matchComponents, theme}) {
+      let iconsDir = path.join(__dirname, "../deps/heroicons/optimized")
+      let values = {}
+      let icons = [
+        ["", "/24/outline"],
+        ["-solid", "/24/solid"],
+        ["-mini", "/20/solid"],
+        ["-micro", "/16/solid"]
+      ]
+      icons.forEach(([suffix, dir]) => {
+        fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
+          let name = path.basename(file, ".svg") + suffix
+          values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
+        })
+      })
+      matchComponents({
+        "hero": ({name, fullPath}) => {
+          let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
+          let size = theme("spacing.6")
+          if (name.endsWith("-mini")) {
+            size = theme("spacing.5")
+          } else if (name.endsWith("-micro")) {
+            size = theme("spacing.4")
+          }
+          return {
+            [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+            "-webkit-mask": `var(--hero-${name})`,
+            "mask": `var(--hero-${name})`,
+            "mask-repeat": "no-repeat",
+            "background-color": "currentColor",
+            "vertical-align": "middle",
+            "display": "inline-block",
+            "width": size,
+            "height": size
+          }
+        }
+      }, {values})
+    })
   ]
 }

lib/atomic_web/components/activity.ex

@@ -46,21 +46,21 @@ defmodule AtomicWeb.Components.Activity do
         <div class="flex space-x-4">
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
-              <.icon name={:clock} solid class="h-5 w-5" />
+              <.icon name="hero-clock-solid" class="size-5" />
               <span class="font-medium text-gray-900"><%= relative_datetime(@activity.start) %></span>
               <span class="sr-only">starting in</span>
             </span>
           </span>
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
-              <.icon name={:user_group} solid class="h-5 w-5" />
+              <.icon name="hero-user-group-solid" class="size-5" />
               <span class="font-medium text-gray-900"><%= @activity.enrolled %>/<%= @activity.maximum_entries %></span>
               <span class="sr-only">enrollments</span>
             </span>
           </span>
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
-              <.icon name={:map_pin} solid class="h-5 w-5" />
+              <.icon name="hero-map-pin-solid" class="size-5" />
               <span class="font-medium text-gray-900"><%= @activity.location.name %></span>
               <span class="sr-only">location</span>
             </span>

lib/atomic_web/components/badge.ex

@@ -26,11 +26,6 @@ defmodule AtomicWeb.Components.Badge do
 
   attr :icon, :atom, default: nil, doc: "The icon to display."
 
-  attr :icon_variant, :atom,
-    default: :outline,
-    values: [:solid, :outline, :mini],
-    doc: "The icon variation to display."
-
   attr :icon_class, :string, default: "", doc: "Additional classes to apply to the icon."
 
   attr :class, :string, default: "", doc: "Additional classes to apply to the badge."
@@ -50,11 +45,11 @@ defmodule AtomicWeb.Components.Badge do
       ]}
     >
       <%= if @icon && @icon_position == :left do %>
-        <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} solid={@icon_variant == :solid} mini={@icon_variant == :mini} />
+        <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} />
       <% end %>
       <%= render_slot(@inner_block) || @label %>
       <%= if @icon && @icon_position == :right do %>
-        <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} solid={@icon_variant == :solid} mini={@icon_variant == :mini} />
+        <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} />
       <% end %>
     </div>
     """

lib/atomic_web/components/button.ex

@@ -47,11 +47,6 @@ defmodule AtomicWeb.Components.Button do
 
   attr :icon, :atom, default: nil, doc: "The icon to display."
 
-  attr :icon_variant, :atom,
-    default: :outline,
-    values: [:solid, :outline, :mini],
-    doc: "The icon variation to display."
-
   attr :icon_class, :string, default: "", doc: "Additional classes to apply to the icon."
 
   attr :class, :string, default: "", doc: "Additional classes to apply to the component."
@@ -127,7 +122,7 @@ defmodule AtomicWeb.Components.Button do
 
   defp icon_content(assigns) do
     ~H"""
-    <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} solid={@icon_variant == :solid} mini={@icon_variant == :mini} />
+    <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} />
     """
   end
 

lib/atomic_web/components/calendar/calendar.ex

@@ -69,7 +69,7 @@ defmodule AtomicWeb.Components.Calendar do
                 <.link patch={"#{if @mode == "month" do @previous_month_path else @previous_week_path end}"}>
                   <button type="button" class="flex items-center justify-center py-2 pr-4 pl-3 text-zinc-400 hover:bg-zinc-50 hover:text-zinc-500 focus:relative md:w-9 md:px-2">
                     <span class="sr-only">Previous month</span>
-                    <.icon name={:chevron_left} solid class="h-3 w-3 sm:h-5 sm:w-5" />
+                    <.icon name="hero-chevron-left-solid" class="size-3 sm:h-5 sm:w-5" />
                   </button>
                 </.link>
                 <.link patch={"#{if @mode == "month" do @present_month_path else @present_week_path end}"}>
@@ -80,7 +80,7 @@ defmodule AtomicWeb.Components.Calendar do
                 <.link patch={"#{if @mode == "month" do @next_month_path else @next_week_path end}"}>
                   <button type="button" class="flex items-center justify-center py-2 pr-3 pl-4 text-zinc-400 hover:bg-zinc-50 hover:text-zinc-500 focus:relative md:w-9 md:px-2">
                     <span class="sr-only">Next month</span>
-                    <.icon name={:chevron_right} solid class="h-3 w-3 sm:h-5 sm:w-5" />
+                    <.icon name="hero-chevron-right-solid" class="size-3 sm:h-5 sm:w-5" />
                   </button>
                 </.link>
               </div>
@@ -95,7 +95,7 @@ defmodule AtomicWeb.Components.Calendar do
                     ]}
                   >
                     <:wrapper>
-                      <.button color={:white} icon={:chevron_down} icon_position={:right} icon_variant={:solid}>
+                      <.button color={:white} icon="hero-chevron-down-solid" icon_position={:right}>
                         <%= if @mode == "month" do %>
                           <%= gettext("Month view") %>
                         <% else %>
@@ -150,7 +150,7 @@ defmodule AtomicWeb.Components.Calendar do
               <div class="relative ml-6 md:hidden">
                 <button type="button" @click="mode_view = !mode_view" class="-mx-2 flex items-center rounded-full border border-transparent p-2 text-zinc-400 hover:text-zinc-500" id="menu-0-button" aria-expanded="false" aria-haspopup="true">
                   <span class="sr-only">Open menu</span>
-                  <.icon name={:ellipsis_horizontal} solid class="h-3 w-3 sm:h-5 sm:w-5" />
+                  <.icon name="hero-ellipsis-horizontal-solid" class="size-3 sm:h-5 sm:w-5" />
                 </button>
                 <div x-bind:class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right divide-y divide-zinc-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                   <div class="py-1" role="none">

lib/atomic_web/components/calendar/month.ex

@@ -61,7 +61,7 @@ defmodule AtomicWeb.Components.CalendarMonth do
                     <.badge variant={:outline} color={:primary} label="Activity" />
                   </.link>
                   <time datetime={activity.start} class="flex items-center text-zinc-700">
-                    <.icon name={:clock} solid class="mr-2 h-5 w-5 text-zinc-400" />
+                    <.icon name="hero-clock-solid" class="mr-2 size-5 text-zinc-400" />
                     <%= Calendar.strftime(activity.start, "%Hh%M") %>
                   </time>
                 </div>
@@ -99,7 +99,7 @@ defmodule AtomicWeb.Components.CalendarMonth do
     <div class={@class}>
       <time date-time={@date} class={
           "ml-auto lg:ml-0 pr-2 lg:pr-0 #{if @today? == 0 do
-            "flex h-6 w-6 items-center justify-center rounded-full bg-orange-400 font-semibold text-white shrink-0"
+            "flex size-6 items-center justify-center rounded-full bg-orange-400 font-semibold text-white shrink-0"
           end}"
         }>
         <%= @text %>
@@ -122,7 +122,7 @@ defmodule AtomicWeb.Components.CalendarMonth do
         date-time={@date}
         class={
           "ml-auto lg:ml-0 #{if current_from_params(@timezone, @params) == @date do
-            "ml-auto flex h-6 w-6 items-center justify-center rounded-full #{if @today? == 0 do
+            "ml-auto flex size-6 items-center justify-center rounded-full #{if @today? == 0 do
               "bg-orange-700"
             else
               "bg-zinc-900"

lib/atomic_web/components/dropdown.ex

@@ -11,11 +11,6 @@ defmodule AtomicWeb.Components.Dropdown do
 
   attr :items, :list, default: [], doc: "The items to display in the dropdown."
 
-  attr :icon_variant, :atom,
-    default: :outline,
-    values: [:solid, :outline, :mini],
-    doc: "The icon variation to display."
-
   attr :orientation, :atom,
     default: :down,
     doc: "The orientation of the dropdown.",
@@ -51,14 +46,14 @@ defmodule AtomicWeb.Components.Dropdown do
                 method={Map.get(item, :method, "get")}
               >
                 <%= if item[:icon] do %>
-                  <.icon solid={@icon_variant == :solid} mini={@icon_variant == :mini} name={item.icon} class="ml-2 inline-block h-5 w-5" />
+                  <.icon name={item.icon} class="ml-2 inline-block size-5" />
                 <% end %>
                 <%= item.name %>
               </.link>
             <% else %>
               <div class={"#{item[:class]} flex items-center gap-x-2 px-4 py-2 text-sm text-gray-700"}>
                 <%= if item[:icon] do %>
-                  <.icon solid={@icon_variant == :solid} mini={@icon_variant == :mini} name={item.icon} class="ml-2 inline-block h-5 w-5" />
+                  <.icon name={item.icon} class="ml-2 inline-block size-5" />
                 <% end %>
                 <%= item.name %>
               </div>

lib/atomic_web/components/empty.ex

@@ -13,12 +13,12 @@ defmodule AtomicWeb.Components.Empty do
   def empty_state(assigns) do
     ~H"""
     <div id={@id} class="text-center">
-      <.icon name={:plus_circle} class="mx-auto h-12 w-12 text-zinc-400" />
+      <.icon name="hero-plus-circle" class="mx-auto size-12 text-zinc-400" />
       <h3 class="mt-2 text-sm font-semibold text-zinc-900">No <%= plural(@placeholder) %></h3>
       <p class="mt-1 text-sm text-zinc-500">Get started by creating a new <%= @placeholder %>.</p>
       <div class="mt-4">
         <.link navigate={@url} class="inline-flex items-center rounded-md bg-orange-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500">
-          <svg class="mr-1.5 -ml-0.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <svg class="mr-1.5 -ml-0.5 size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
             <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
           </svg>
           New <%= @placeholder %>

lib/atomic_web/components/icon.ex

@@ -1,19 +1,17 @@
 defmodule AtomicWeb.Components.Icon do
   @moduledoc """
-  A component for rendering an icon from the Heroicons package.
+  A component for rendering icons.
+
+  An icon can either be from the Heroicons or Tabler Icons set.
   """
   use Phoenix.Component
 
-  attr :rest, :global,
-    doc: "The arbitrary HTML attributes for the svg container",
-    include: ~w(fill stroke stroke-width)
-
   attr :name, :atom, required: true
-  attr :outline, :boolean, default: true
-  attr :solid, :boolean, default: false
-  attr :mini, :boolean, default: false
+  attr :class, :string, default: nil
 
-  def icon(assigns) do
-    apply(Heroicons, assigns.name, [assigns])
+  def icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
   end
 end

lib/atomic_web/components/image_uploader.ex

@@ -23,7 +23,7 @@ defmodule AtomicWeb.Components.ImageUploader do
           <div class="mx-auto sm:col-span-6 lg:w-full">
             <div class="my-[140px] flex justify-center px-6">
               <div class="space-y-1 text-center">
-                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
+                <svg class="mx-auto size-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                   <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                 </svg>
                 <div class="flex text-sm text-gray-600">
@@ -58,7 +58,7 @@ defmodule AtomicWeb.Components.ImageUploader do
                     <% end %>
                   </figcaption>
                   <button type="button" phx-click="cancel-image" phx-target={@target} phx-value-ref={entry.ref} aria-label="cancel" class="pl-4">
-                    <.icon name={:x_mark} solid class="h-5 w-5 text-gray-400" />
+                    <.icon name="hero-x-mark-solid" class="size-5 text-gray-400" />
                   </button>
                 </div>
               </figure>

lib/atomic_web/components/modal.ex

@@ -42,7 +42,7 @@ defmodule AtomicWeb.Components.Modal do
             <.focus_wrap id={"#{@id}-container"} phx-click-away={JS.exec("phx-cancel", to: "##{@id}")} class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-white p-14 shadow-lg ring-1 transition">
               <div class="absolute top-6 right-5">
                 <button phx-click={JS.exec("phx-cancel", to: "##{@id}")} type="button" class="-m-3 flex-none p-3 opacity-20 outline-none hover:opacity-40" aria-label={gettext("close")}>
-                  <.icon name={:x_mark} solid class="h-5 w-5" />
+                  <.icon name="hero-x-mark-solid" class="size-5" />
                 </button>
               </div>
               <div id={"#{@id}-content"}>