Use icons for actions

Author: cruessler

assets/tailwind.config.js

@@ -2,6 +2,8 @@
 // https://www.phoenixdiff.org/compare/1.6.15...1.7.0
 
 const plugin = require('tailwindcss/plugin');
+const fs = require('fs');
+const path = require('path');
 
 module.exports = {
   content: [
@@ -43,5 +45,61 @@ module.exports = {
         '.phx-change-loading &',
       ]),
     ),
+
+    // Embeds Heroicons (https://heroicons.com) into your app.css bundle
+    // See your `CoreComponents.icon/1` for more information.
+    //
+    plugin(function ({ matchComponents, theme }) {
+      const iconsDir = path.join(__dirname, '../deps/heroicons/optimized');
+      const values = {};
+      const icons = [
+        ['', '/24/outline'],
+        ['-solid', '/24/solid'],
+        ['-mini', '/20/solid'],
+        ['-micro', '/16/solid'],
+      ];
+      icons.forEach(([suffix, dir]) => {
+        fs.readdirSync(path.join(iconsDir, dir)).forEach((file) => {
+          const name = path.basename(file, '.svg') + suffix;
+          values[name] = { name, fullPath: path.join(iconsDir, dir, file) };
+        });
+      });
+      matchComponents(
+        {
+          hero: ({ name, fullPath }) => {
+            const content = fs
+              .readFileSync(fullPath)
+              .toString()
+              .replace(/\r?\n|\r/g, '');
+
+            const getSize = () => {
+              if (name.endsWith('-mini')) {
+                return theme('spacing.5');
+              }
+              if (name.endsWith('-micro')) {
+                return theme('spacing.4');
+              }
+
+              return theme('spacing.6');
+            };
+
+            const size = getSize();
+
+            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/ex_rss_web.ex

@@ -113,10 +113,8 @@ defmodule ExRssWeb do
     quote do
       # HTML escaping functionality
       import Phoenix.HTML
-      # TODO
-      # Phoenix 1.7 would also generate `import ExRssWeb.CoreComponents`. I did
-      # not add this import to keep the initial migration to `LiveView` small.
-      # Translation
+
+      import ExRssWeb.CoreComponents
       import ExRssWeb.Gettext
 
       # Shortcut for generating JS commands

lib/ex_rss_web/components/core_components.ex

@@ -0,0 +1,30 @@
+defmodule ExRssWeb.CoreComponents do
+  use Phoenix.Component
+
+  @doc """
+  Renders a [Heroicon](https://heroicons.com).
+
+  Heroicons come in three styles – outline, solid, and mini.
+  By default, the outline style is used, but solid and mini may
+  be applied by using the `-solid` and `-mini` suffix.
+
+  You can customize the size and colors of the icons by setting
+  width, height, and background color classes.
+
+  Icons are extracted from the `deps/heroicons` directory and bundled within
+  your compiled app.css by the plugin in your `assets/tailwind.config.js`.
+
+  ## Examples
+
+      <.icon name="hero-x-mark-solid" />
+      <.icon name="hero-arrow-path" class="ml-1 w-3 h-3 animate-spin" />
+  """
+  attr :name, :string, required: true
+  attr :class, :string, default: nil
+
+  def icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
+  end
+end

lib/ex_rss_web/feed_live/index.html.heex

@@ -9,8 +9,12 @@
       </div>
 
       <div class="md:shrink-0 flex self-start mt-1 ml-auto space-x-4">
-        <a target="_blank" aria-label={"View entry #{@oldest_unread_entry.title}"}>View</a>
-        <button aria-label="Mark as read">Mark as read</button>
+        <a href={@oldest_unread_entry.url} target="_blank" aria-label={"View entry #{@oldest_unread_entry.title}"}>
+          <.icon name="hero-arrow-top-right-on-square-solid" />
+        </a>
+        <button aria-label="Mark as read">
+          <.icon name="hero-check-circle-solid" />
+        </button>
       </div>
     </li>
   </ul>

mix.exs

@@ -51,7 +51,14 @@ defmodule ExRss.Mixfile do
       {:timex, "~> 3.1"},
       {:bcrypt_elixir, "~> 3.0"},
       {:mix_test_watch, "~> 1.0", only: :dev, runtime: false},
-      {:mox, "~> 1.1", only: [:dev, :test]}
+      {:mox, "~> 1.1", only: [:dev, :test]},
+      {:heroicons,
+       github: "tailwindlabs/heroicons",
+       tag: "v2.2.0",
+       sparse: "optimized",
+       app: false,
+       compile: false,
+       depth: 1}
     ]
   end
 

mix.lock

@@ -20,6 +20,7 @@
   "floki": {:hex, :floki, "0.36.3", "1102f93b16a55bc5383b85ae3ec470f82dee056eaeff9195e8afdf0ef2a43c30", [:mix], [], "hexpm", "fe0158bff509e407735f6d40b3ee0d7deb47f3f3ee7c6c182ad28599f9f6b27a"},
   "gettext": {:hex, :gettext, "0.26.1", "38e14ea5dcf962d1fc9f361b63ea07c0ce715a8ef1f9e82d3dfb8e67e0416715", [:mix], [{:expo, "~> 0.5.1 or ~> 1.0", [hex: :expo, repo: "hexpm", optional: false]}], "hexpm", "01ce56f188b9dc28780a52783d6529ad2bc7124f9744e571e1ee4ea88bf08734"},
   "hackney": {:hex, :hackney, "1.20.1", "8d97aec62ddddd757d128bfd1df6c5861093419f8f7a4223823537bad5d064e2", [:rebar3], [{:certifi, "~> 2.12.0", [hex: :certifi, repo: "hexpm", optional: false]}, {:idna, "~> 6.1.0", [hex: :idna, repo: "hexpm", optional: false]}, {:metrics, "~> 1.0.0", [hex: :metrics, repo: "hexpm", optional: false]}, {:mimerl, "~> 1.1", [hex: :mimerl, repo: "hexpm", optional: false]}, {:parse_trans, "3.4.1", [hex: :parse_trans, repo: "hexpm", optional: false]}, {:ssl_verify_fun, "~> 1.1.0", [hex: :ssl_verify_fun, repo: "hexpm", optional: false]}, {:unicode_util_compat, "~> 0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "fe9094e5f1a2a2c0a7d10918fee36bfec0ec2a979994cff8cfe8058cd9af38e3"},
+  "heroicons": {:git, "https://github.com/tailwindlabs/heroicons.git", "0435d4ca364a608cc75e2f8683d374e55abbae26", [tag: "v2.2.0", sparse: "optimized"]},
   "html_entities": {:hex, :html_entities, "0.5.2", "9e47e70598da7de2a9ff6af8758399251db6dbb7eebe2b013f2bbd2515895c3c", [:mix], [], "hexpm", "c53ba390403485615623b9531e97696f076ed415e8d8058b1dbaa28181f4fdcc"},
   "httpoison": {:hex, :httpoison, "2.2.1", "87b7ed6d95db0389f7df02779644171d7319d319178f6680438167d7b69b1f3d", [:mix], [{:hackney, "~> 1.17", [hex: :hackney, repo: "hexpm", optional: false]}], "hexpm", "51364e6d2f429d80e14fe4b5f8e39719cacd03eb3f9a9286e61e216feac2d2df"},
   "idna": {:hex, :idna, "6.1.1", "8a63070e9f7d0c62eb9d9fcb360a7de382448200fbbd1b106cc96d3d8099df8d", [:rebar3], [{:unicode_util_compat, "~>0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "92376eb7894412ed19ac475e4a86f7b413c1b9fbb5bd16dccd57934157944cea"},