Doumi.Phoenix.SVG

Doumi.Phoenix.SVG is a helper library that generates Phoenix function components from SVG files.

도우미(Doumi) means "helper" in Korean.

The original idea for this library came from @chitacan.

Usage

Using SVG in HTML is too verbose. It makes HTML hard to understand.

defmodule MyAppWeb.PageLive do
  ...

  def render(assigns) do
    ~H"""
    <div>
      <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Elixir</title><path d="M19.793 16.575c0 3.752-2.927 7.426-7.743 7.426-5.249 0-7.843-3.71-7.843-8.29 0-5.21 3.892-12.952 8-15.647a.397.397 0 0 1 .61.371 9.716 9.716 0 0 0 1.694 6.518c.522.795 1.092 1.478 1.763 2.352.94 1.227 1.637 1.906 2.644 3.842l.015.028a7.107 7.107 0 0 1 .86 3.4z"/></svg>
    </div>
    """
  end
end

With Doumi.Phoenix.SVG, you can generate Phoenix Component from SVG files automatically.

<!-- priv/icons/elixir-logo.svg -->

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <title>Elixir</title>
  <path
    d="M19.793 16.575c0 3.752-2.927 7.426-7.743 7.426-5.249 0-7.843-3.71-7.843-8.29 0-5.21 3.892-12.952 8-15.647a.397.397 0 0 1 .61.371 9.716 9.716 0 0 0 1.694 6.518c.522.795 1.092 1.478 1.763 2.352.94 1.227 1.637 1.906 2.644 3.842l.015.028a7.107 7.107 0 0 1 .86 3.4z"
  />
</svg>

defmodule MyAppWeb.Icon do
  use Doumi.Phoenix.SVG, path: "priv/icons"
end

defmodule MyAppWeb.PageLive do
  ...

  alias MyAppWeb.Icon
  def render(assigns) do
    ~H"""
    <div>
      <Icon.elixir_logo />
    </div>
    """
  end
end

Doumi.Phoenix.SVG generates function components with names of SVG files replaced hyphen with underscore.

ex) elixir-logo.svg -> elixir_logo/1

SVG files must be in priv when your app is deployed with Elixir release.

Here's the real world example.

Installation

If available in Hex, the package can be installed by adding doumi_phoenix_svg to your list of dependencies in mix.exs:

def deps do
  [
    {:doumi_phoenix_svg, "~> 0.3.0"}
  ]
end

Other Doumi packages

• Doumi.URI.Query: A helper library that supports encoding complicated query of URI.

Copyright and License

Copyright (c) 2022 Jinkyou Son (Json)

This work is free. You can redistribute it and/or modify it under the terms of the MIT License. See the LICENSE.md file for more details.