Heroicons

[manuel-rubio]

Change the use of Fontawesome to use Heroicons instead. Based on the new templates for Phoenix 1.7 I can see it's installing heroicons repository and letting to tailwind to get the svg icons available there to be injected in the HTML code. The idea is to use:

      {:ex_heroicons, "~> 3.1"},
      {:heroicons, github: "tailwindlabs/heroicons", tag: "v2.1.1", sparse: "optimized", app: false, compile: false, depth: 1},

And then in the tailwind configuration:

    plugin(function({matchComponents, theme}) {
      let iconsDir = path.join(__dirname, "./vendor/heroicons/optimized")
      let iconsDir = path.join(__dirname, "../../../deps/heroicons/optimized")
      let values = {}
      let icons = [
        ["", "/24/outline"],
        ["-solid", "/24/solid"],
        ["-mini", "/20/solid"]
        ["-mini", "/20/solid"],
        ["-micro", "/16/solid"]
      ]

And according to the function inside of core_components.ex:

  @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
  attr :title, :string, default: nil

  def icon(%{name: "hero-" <> _} = assigns) do
    ~H"""
    <% {name, type} = split_name_type(@name) %>
    <Heroicons.icon name={name} type={type} class={@class} title={@title} />
    """
  end

  defp split_name_type("hero-" <> name) do
    cond do
      String.ends_with?(name, "-outline") ->
        {String.replace_suffix(name, "-outline", ""), "outline"}

      String.ends_with?(name, "-solid") ->
        {String.replace_suffix(name, "-solid", ""), "solid"}

      String.ends_with?(name, "-mini") ->
        {String.replace_suffix(name, "-mini", ""), "mini"}

      String.ends_with?(name, "-micro") ->
        {String.replace_suffix(name, "-micro", ""), "micro"}

      :else ->
        {name, "outline"}
    end
  end

And finally the interesting part... changing all of the occurrences for <.FontAwesome...> to use <.icon name="..." />. It's possible it needs to use class for size or color, but you get the main idea.

[manuel-rubio]

After checking Phoenix 1.8 I think it's better to go with Tailwind CSS #2 first.