View Source 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
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
Installation
Add :doumi_phoenix_svg
to the list of dependencies in mix.exs
:
def deps do
[
{:doumi_phoenix_svg, "~> 0.1"}
]
end
copyright-and-license
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.