Merge pull request #15 from chrismccord/cm-generate-module

Generate module and optimize LiveView diffing

.formatter.exs

@@ -1,4 +1,6 @@
 # Used by "mix format"
 [
-  inputs: ["{mix,.formatter}.exs", "{config,lib,test}/**/*.{ex,exs}"]
+  import_deps: [:phoenix],
+  inputs: ["{mix,.formatter}.exs", "{config,lib,test}/**/*.{ex,exs}"],
+  plugins: [Phoenix.LiveView.HTMLFormatter]
 ]

CHANGELOG.md

@@ -1,11 +1,24 @@
 # Changelog
 
+## 0.5.0
+
+### Backwards incompatible changes
+- Render icons outside HEEx function components has been dropped. Use the function component syntax instead: `<Heroicons.cake />`
+- The separate modules `Heroicons.Outline|Solid|Mini` have been dropped in favor of a single `Heroicons` module.
+  By default, this module renders the outline style, but a `solid` or `mini` attribute can be provided to
+  select styling.
+
+### Enhancements
+- Provide unified interface with `solid`, and `mini` attributes for styling.
+- Optimize svg generation for LiveView diffing.
+
 ## 0.4.1
-### Enchancements
+
+### Enhancements
 - Further optimize the JIT Phoenix Component compiler
 
 ## 0.4.0
-### Enchancements
+### Enhancements
 - Update to Heroicons 2 (https://github.com/mveytsman/heroicons_elixir/pull/12)
 - Add update task and generate optimized version of icons (https://github.com/mveytsman/heroicons_elixir/pull/13)
 - Optimize compile times by no longer reading every icon during compliation.
@@ -13,7 +26,7 @@
 
 ## 0.3.2 (2022-02-21)
 
-### Enchancements
+### Enhancements
   - Update heroicons to 1.0.5 (https://github.com/mveytsman/heroicons_elixir/pull/8)
 
 

README.md

@@ -1,14 +1,12 @@
 # Heroicons
 
-[Heroicons](https://github.com/tailwindlabs/heroicons) are "a set of free MIT-licensed high-quality SVG icons for you to use in your web projects". This package gives you Elixir functions to drop Heroicons into your HTML, styled with arbitrary classes.
+[Heroicons](heroicons.com) are "a set of free MIT-licensed high-quality SVG icons for you to use in your web projects". This package gives you Elixir functions to drop Heroicons into your HTML, styled with arbitrary classes.
 
-This library provides optimized svgs for each Heroicon packaged as a Phoenix Component (and as a function for backwards-compatibility).
+This library provides optimized svgs for each Heroicon packaged as a Phoenix Component.
-
-In order to provide the best balance of fast compilation times and run-time performance, Phoenix Components are just-in-time compiled on first use and then cached in an ETS-backed cache.
 
 Heroicons are designed by [Steve Schoger](https://twitter.com/steveschoger)
 
-Current Heroicons Version: **2.0.10**. It's possible to configure a different Heroicon version locally, see [mix heroicons.update](https://hexdocs.pm/heroicons/Mix.Tasks.Heroicons.Update.html)
+Current Heroicons Version: **2.0.10**.
 
 ## Installation
 
@@ -17,7 +15,7 @@ Add Heroicons to your `mix.exs`:
 ```elixir
 defp deps do
   [
-    {:heroicons, "~> 0.4.1"}
+    {:heroicons, "~> 0.5.0"}
   ]
 end
 ```
@@ -26,23 +24,25 @@ After that, run `mix deps.get`.
 
 ## Usage
 
-The components are in `Heroicons.Solid`, `Heroicons.Outline`, and `Heroicons.Mini`. Each icon is a Phoenix Component you can use in your HEEx templates.
+The components are provided by the `Heroicons` module. Each icon is a Phoenix Component you can use in your HEEx templates.
+
+By default the outline style is used:
 
 ```eex
 <Heroicons.Solid.cake />
 ```
 
-and style it with some classes
+You can render the solid or mini styles by providing the `solid` or `mini` flags:
 
 ```eex
-<Heroicons.Solid.cake class="w-6 h-6 text-gray-500" />
+<Heroicons.Solid.cake solid />
+<Heroicons.Solid.cake mini />
 ```
 
-There are also function versions of each component:
+You can also provide arbitrary HTML attributes to the svg tag, such as classes:
-```eex
-<%= Heroicons.Solid.cake() %>
 
-<%= Heroicons.Solid.cake(class: "w-6 h-6 text-gray-500") %>
+```eex
+<Heroicons.cake class="w-6 h-6 text-gray-500" />
 ```
 
 For a full list of icons see [the docs](https://hexdocs.pm/heroicons/api-reference.html) or [heroicons.com](https://heroicons.com/).

assets/heroicons.exs

@@ -0,0 +1,112 @@
+defmodule Heroicons do
+  @moduledoc """
+  Provides precompiled icon compiles from [heroicons.com v<%= @vsn %>](heroicons.com).
+
+  Heroicons are designed by [Steve Schoger](https://twitter.com/steveschoger)
+
+  ## Usage
+
+  Hero icons come in three styles – outline (`24x24`), solid (`24x24`), and mini (`20x20`).
+
+  By default, the icon components will use the outline style, but the `solid` or
+  `mini` attributes may be passed to select styling, for example:
+
+  ```heex
+  <Heroicons.cake />
+  <Heroicons.cake solid />
+  <Heroicons.cake mini />
+  ```
+
+  You can also pass arbitrary HTML attributes to the components:
+
+   ```heex
+  <Heroicons.cake class="w-2 h-2" />
+  <Heroicons.cake solid class="w-2 h-2" />
+  ```
+
+  ## Heroicons License Attribution
+
+  MIT License
+
+  Copyright (c) 2020 Refactoring UI Inc.
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.
+  """
+  use Phoenix.Component
+
+  defp svg(assigns, outline, solid, mini) do
+    case assigns do
+      %{mini: false, solid: false} -> svg_outline(assign(assigns, paths: outline))
+      %{solid: true, mini: false} -> svg_solid(assign(assigns, paths: solid))
+      %{mini: true, solid: false} -> svg_mini(assign(assigns, paths: mini))
+      %{} -> raise ArgumentError, "expected either mini or solid, but got both."
+    end
+  end
+
+  defp svg_outline(assigns) do
+    ~H"""
+    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" {@rest}>
+      <%%= {:safe, @paths} %>
+    </svg>
+    """
+  end
+
+  defp svg_solid(assigns) do
+    ~H"""
+    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" {@rest}>
+      <%%= {:safe, @paths} %>
+    </svg>
+    """
+  end
+
+  defp svg_mini(assigns) do
+    ~H"""
+    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" {@rest}>
+      <%%= {:safe, @paths} %>
+    </svg>
+    """
+  end
+
+  <%= for icon <- @icons, {func, [outline, solid, mini]} = icon do %>
+  @doc """
+  Renders the `<%= func %>` icon.
+
+  By default, the outlined (24x24) component is used, but the `solid` or `mini`
+  attributes can be provided for alternative styles.
+
+  You may also pass arbitrary HTML attributes to be applied to the svg tag.
+
+  ## Examples
+
+  ```heex
+  <Heroicons.<%= func %> />
+  <Heroicons.<%= func %> class="w-4 h-4" />
+  <Heroicons.<%= func %> solid />
+  <Heroicons.<%= func %> mini />
+  ```
+  """
+  attr :rest, :global, doc: "the arbitrary HTML attributes for the svg container"
+  attr :solid, :boolean, default: false
+  attr :mini, :boolean, default: false
+
+  def <%= func %>(assigns) do
+    svg(assigns, ~S|<%= outline %>|, ~S|<%= solid %>|, ~S|<%= mini %>|)
+  end
+  <% end %>
+end