Skip to content

Commit

Permalink
Use options instead of global config for path and attributes
Browse files Browse the repository at this point in the history
  • Loading branch information
jsonmaur committed Apr 26, 2023
1 parent 150210a commit 615a0ad
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 15 deletions.
25 changes: 16 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,29 +34,36 @@ defp html_helpers do
end
```

Now when you start your Phoenix server, all the SVG files located in `priv/svgs` will be loaded into memory and can be used with the svg component. Any attributes defined will be passed through to the `<svg>` tag. For example, if you have a file at `priv/svgs/account.svg`:
Now when you start your Phoenix server, all the SVG files located in `priv/svgs` will be loaded into memory and can be used with the svg component. For example, if you have a file at `priv/svgs/checkmark.svg`:

```heex
<.svg name="account" class="foobar" />
<.svg name="checkmark" />
```

An error will be raised if the file is not found. If your svgs are nested in a subdirectory, specify a list in the `path` attribute with one item representing each folder. e.g. for `priv/svgs/generic/account.svg`:
An error will be raised if the file is not found. If your svgs are nested in a subdirectory, specify a list in the `path` attribute with one item representing each folder. e.g. for `priv/svgs/branding/circle/checkmark.svg`:

```heex
<.svg name="account" path={["generic"]} class="foobar" />
<.svg name="checkmark" path={["branding", "circle"]} />
```

## Configuration
Any attributes defined will be passed through to the `<svg>` tag:

You can customize the following config items:
```heex
<.svg name="checkmark" class="foobar" />
```

## Configuration

* `:path` The path of your svg files relative to your project directory. If using releases, make sure this path is included in your release directory (`priv` is included by default). Defaults to `priv/svgs`.
* `:otp_app` - The name of your OTP application. This is required.
* `:as` - The name of the generated component function. Defaults to `:svg`.
* `:path` - The path of your svg files relative to your project directory. If using releases, make sure this path is included in your release directory (`priv` is included by default). Defaults to `priv/svgs`.
* `:attributes` - A map of default attributes to inject into the SVG tags. Defaults to `%{}`.

To customize any of these values, add them to `config/config.exs`:
#### Example

```elixir
config :phoenix_svg,
use PhoenixSVG,
otp_app: :myapp,
path: "priv/static/icons",
attributes: %{width: "24px", height: "24px"}
```
Expand Down
12 changes: 6 additions & 6 deletions lib/phoenix_svg.ex
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ defmodule PhoenixSVG do
import Phoenix.Component

defmacro __using__(opts) do
base_path = Application.get_env(:phoenix_svg, :path, "priv/svgs")
attributes = Application.get_env(:phoenix_svg, :attributes, %{})

otp_app = Keyword.fetch!(opts, :otp_app)
svgs_path = Application.app_dir(otp_app, base_path)
as = Keyword.get(opts, :as, :svg)
base_path = Keyword.get(opts, :path, "priv/svgs")
attributes = Keyword.get(opts, :attributes, %{})

svgs_path = Application.app_dir(otp_app, base_path)
{svgs, hash} = PhoenixSVG.list_files(svgs_path)

[
Expand All @@ -22,7 +22,7 @@ defmodule PhoenixSVG do
quote do
@external_resource unquote(svg)

def svg(unquote(Macro.escape(pattern_match)) = assigns) do
def unquote(as)(unquote(Macro.escape(pattern_match)) = assigns) do
html_attrs =
unquote(Macro.escape(attributes))
|> Map.merge(assigns)
Expand All @@ -38,7 +38,7 @@ defmodule PhoenixSVG do
end
end,
quote do
def svg(assigns) do
def unquote(as)(assigns) do
for_path = if assigns[:path], do: " for path \"#{inspect(assigns.path)}\"", else: ""
raise "#{inspect(assigns.name)} is not a valid svg#{for_path}"
end
Expand Down

0 comments on commit 615a0ad

Please sign in to comment.