Initial Commit

lib/river_connect_web/components/ui/icon.ex

@@ -0,0 +1,30 @@
+defmodule RiverConnectWeb.Components.UI.Icon do
+  @moduledoc """
+  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 your `assets/vendor/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" />
+  """
+
+  use RiverConnectWeb.Components.UI, :component
+
+  attr :name, :string, required: true
+  attr :class, :string, default: ""
+
+  def icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]}></span>
+    """
+  end
+end