Merge pull request #5 from mveytsman/components
Add components for Heroicons
This commit is contained in:
Max Veytsman
GitHub
@ -1,66 +1,32 @@
|
||||
defmodule Heroicons do
|
||||
@moduledoc """
|
||||
This library provides functions for every [Heroicon](https://github.com/tailwindlabs/heroicons).
|
||||
See `Heroicons.Outline` and `Heroicons.Solid` for the two styles of icon.
|
||||
This library provides functions and components for every [Heroicon](https://github.com/tailwindlabs/heroicons).
|
||||
|
||||
Heroicons are provided as functions in `Heroicons.Outline` and `Heroicons.Solid`,
|
||||
and as `Phoenix.Component`s in `Heroicons.Components.Outline` and `Heroicons.Components.Solid`.
|
||||
|
||||
Note that components require your project to have `:phoenix_live_view` as a dependency.
|
||||
|
||||
Heroicons are designed by [Steve Schoger](https://twitter.com/steveschoger)
|
||||
"""
|
||||
|
||||
@doc false
|
||||
defmacro __before_compile__(%Macro.Env{module: module}) do
|
||||
unless Module.has_attribute?(module, :icon_dir) do
|
||||
raise CompileError, description: "@icon_dir attrubute is required"
|
||||
end
|
||||
defmodule Outline do
|
||||
@moduledoc """
|
||||
Outline style icons drawn with a stroke, packaged as functions.
|
||||
|
||||
icon_dir = Module.get_attribute(module, :icon_dir)
|
||||
default_attrs = Module.get_attribute(module, :default_attrs)
|
||||
|
||||
|
||||
icon_paths =
|
||||
Path.absname(icon_dir, :code.priv_dir(:heroicons))
|
||||
|> Path.join("*.svg")
|
||||
|> Path.wildcard()
|
||||
|
||||
for path <- icon_paths do
|
||||
generate_function(path, default_attrs)
|
||||
end
|
||||
end
|
||||
|
||||
@doc false
|
||||
def generate_function(path, default_attrs) do
|
||||
name =
|
||||
Path.basename(path, ".svg")
|
||||
|> String.replace("-", "_")
|
||||
|> String.to_atom()
|
||||
|
||||
icon = File.read!(path)
|
||||
{i, _} = :binary.match(icon, ">")
|
||||
{_, body} = String.split_at(icon, i)
|
||||
|
||||
doc = """
|
||||
)}) {: width=24px}
|
||||
|
||||
## Examples
|
||||
iex> #{name}()
|
||||
iex> #{name}(class: "h-6 w-6 text-gray-500")
|
||||
For primary navigation and marketing sections, designed to be rendered at 24x24.
|
||||
"""
|
||||
|
||||
quote do
|
||||
@doc unquote(doc)
|
||||
@spec unquote(name)(keyword(binary)) :: binary
|
||||
def unquote(name)(opts \\ []) do
|
||||
opts = Keyword.merge(unquote(default_attrs), opts)
|
||||
attrs =
|
||||
for {k, v} <- opts do
|
||||
safe_k =
|
||||
k |> Atom.to_string() |> String.replace("_", "-") |> Phoenix.HTML.Safe.to_iodata()
|
||||
safe_v = v |> Phoenix.HTML.Safe.to_iodata()
|
||||
use Heroicons.Generator, icon_dir: "outline/"
|
||||
end
|
||||
|
||||
{:safe, [?\s, safe_k, ?=, ?", safe_v, ?"]}
|
||||
end
|
||||
defmodule Solid do
|
||||
@moduledoc """
|
||||
Solid style icons drawn with fills, packaged as functions.
|
||||
|
||||
{:safe, ["<svg", Phoenix.HTML.Safe.to_iodata(attrs), unquote(body)]}
|
||||
end
|
||||
end
|
||||
For buttons, form elements, and to support text, designed to be rendered at 20x20.
|
||||
"""
|
||||
|
||||
use Heroicons.Generator, icon_dir: "solid/"
|
||||
end
|
||||
end
|
||||
|
||||
81
lib/heroicons/generator.ex
Normal file
81
lib/heroicons/generator.ex
Normal file
@ -0,0 +1,81 @@
|
||||
defmodule Heroicons.Generator do
|
||||
defmacro __using__(icon_dir: icon_dir) do
|
||||
icon_paths =
|
||||
Path.absname(icon_dir, :code.priv_dir(:heroicons))
|
||||
|> Path.join("*.svg")
|
||||
|> Path.wildcard()
|
||||
|
||||
for path <- icon_paths do
|
||||
generate(path)
|
||||
end
|
||||
end
|
||||
|
||||
@doc false
|
||||
def generate(path) do
|
||||
name =
|
||||
Path.basename(path, ".svg")
|
||||
|> String.replace("-", "_")
|
||||
|> String.to_atom()
|
||||
|
||||
icon = File.read!(path)
|
||||
{i, _} = :binary.match(icon, ">")
|
||||
{head, body} = String.split_at(icon, i)
|
||||
|
||||
doc = """
|
||||
)}) {: width=24px}
|
||||
|
||||
Use as a `Phoenix.Component`
|
||||
<.#{name}>
|
||||
|
||||
<.#{name} class="h-6 w-6 text-gray-500">
|
||||
|
||||
Can also be used as a function (deprecated)
|
||||
|
||||
<%= #{name}() %>
|
||||
|
||||
<%= #{name}(class: "h-6 w-6 text-gray-500") %>
|
||||
"""
|
||||
|
||||
quote do
|
||||
@doc unquote(doc)
|
||||
def unquote(name)(assigns_or_opts \\ [])
|
||||
|
||||
def unquote(name)(var!(assigns)) when is_map(var!(assigns)) do
|
||||
var!(attrs) = Phoenix.LiveView.Helpers.assigns_to_attributes(var!(assigns))
|
||||
|
||||
var!(assigns) = Phoenix.LiveView.assign(var!(assigns), :attrs, var!(attrs))
|
||||
|
||||
unquote(
|
||||
EEx.compile_string(head <> "{@attrs}" <> body,
|
||||
engine: Phoenix.LiveView.HTMLEngine,
|
||||
file: __ENV__.file,
|
||||
line: __ENV__.line + 1,
|
||||
module: __ENV__.module,
|
||||
indentation: 0
|
||||
)
|
||||
)
|
||||
end
|
||||
|
||||
def unquote(name)(opts) when is_list(opts) do
|
||||
IO.warn(
|
||||
"<%= #{unquote(name)}(class: \"...\" %> is deprecated, " <>
|
||||
"please use <.#{unquote(name)} class=\"...\" /> inside HEEx templates instead"
|
||||
)
|
||||
|
||||
# opts = Keyword.merge(unquote(default_attrs), opts)
|
||||
|
||||
attrs =
|
||||
for {k, v} <- opts do
|
||||
safe_k =
|
||||
k |> Atom.to_string() |> String.replace("_", "-") |> Phoenix.HTML.Safe.to_iodata()
|
||||
|
||||
safe_v = v |> Phoenix.HTML.Safe.to_iodata()
|
||||
|
||||
{:safe, [?\s, safe_k, ?=, ?", safe_v, ?"]}
|
||||
end
|
||||
|
||||
{:safe, [unquote(head), Phoenix.HTML.Safe.to_iodata(attrs), unquote(body)]}
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
@ -1,10 +0,0 @@
|
||||
defmodule Heroicons.Outline do
|
||||
@moduledoc """
|
||||
Outline style icons drawn with a stroke.
|
||||
|
||||
For primary navigation and marketing sections, designed to be rendered at 24x24.
|
||||
"""
|
||||
@icon_dir "outline/"
|
||||
@default_attrs [xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor"]
|
||||
@before_compile Heroicons
|
||||
end
|
||||
@ -1,11 +0,0 @@
|
||||
defmodule Heroicons.Solid do
|
||||
@moduledoc """
|
||||
Solid style icons drawn with fills.
|
||||
|
||||
For buttons, form elements, and to support text, designed to be rendered at 20x20.
|
||||
"""
|
||||
|
||||
@icon_dir "solid/"
|
||||
@default_attrs [xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor"]
|
||||
@before_compile Heroicons
|
||||
end
|
||||
1
mix.exs
1
mix.exs
@ -27,6 +27,7 @@ defmodule HeroiconsElixir.MixProject do
|
||||
defp deps do
|
||||
[
|
||||
{:phoenix_html, "~> 2.14 or ~> 3.0"},
|
||||
{:phoenix_live_view, ">= 0.16.0", optional: true},
|
||||
{:ex_doc, "~> 0.23", only: :dev, runtime: false}
|
||||
]
|
||||
end
|
||||
|
||||
11
mix.lock
11
mix.lock
@ -7,12 +7,15 @@
|
||||
"makeup_elixir": {:hex, :makeup_elixir, "0.15.1", "b5888c880d17d1cc3e598f05cdb5b5a91b7b17ac4eaf5f297cb697663a1094dd", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}, {:nimble_parsec, "~> 1.1", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "db68c173234b07ab2a07f645a5acdc117b9f99d69ebf521821d89690ae6c6ec8"},
|
||||
"meeseeks": {:hex, :meeseeks, "0.15.1", "148d5d9ea879cdb415b8bc4162ac5528f9a2fe42fbfe1802c681a2842cb1c0a4", [:mix], [{:meeseeks_html5ever, "~> 0.12.1", [hex: :meeseeks_html5ever, repo: "hexpm", optional: false]}], "hexpm", "5589957b7cca75e6683cecc308253d7854f43b07806939d7031b81ca6e8abd98"},
|
||||
"meeseeks_html5ever": {:hex, :meeseeks_html5ever, "0.12.1", "718fab10d05b83204524a518b2b88caa37ba6a6e02f82e80d6a7bc47552fb54a", [:mix], [{:rustler, "~> 0.21.0", [hex: :rustler, repo: "hexpm", optional: false]}], "hexpm", "11489094637f49a26bad4610a9138352c8d229339d888169cb35b08cdfd8861a"},
|
||||
"mime": {:hex, :mime, "1.5.0", "203ef35ef3389aae6d361918bf3f952fa17a09e8e43b5aa592b93eba05d0fb8d", [:mix], [], "hexpm", "55a94c0f552249fc1a3dd9cd2d3ab9de9d3c89b559c2bd01121f824834f24746"},
|
||||
"mime": {:hex, :mime, "1.6.0", "dabde576a497cef4bbdd60aceee8160e02a6c89250d6c0b29e56c0dfb00db3d2", [:mix], [], "hexpm", "31a1a8613f8321143dde1dafc36006a17d28d02bdfecb9e95a880fa7aabd19a7"},
|
||||
"nimble_parsec": {:hex, :nimble_parsec, "1.1.0", "3a6fca1550363552e54c216debb6a9e95bd8d32348938e13de5eda962c0d7f89", [:mix], [], "hexpm", "08eb32d66b706e913ff748f11694b17981c0b04a33ef470e33e11b3d3ac8f54b"},
|
||||
"phoenix_html": {:hex, :phoenix_html, "2.14.3", "51f720d0d543e4e157ff06b65de38e13303d5778a7919bcc696599e5934271b8", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "efd697a7fff35a13eeeb6b43db884705cba353a1a41d127d118fda5f90c8e80f"},
|
||||
"phoenix": {:hex, :phoenix, "1.5.9", "a6368d36cfd59d917b37c44386e01315bc89f7609a10a45a22f47c007edf2597", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_html, "~> 2.13 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.0", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:plug, "~> 1.10", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 1.0 or ~> 2.2", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.1.2 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "7e4bce20a67c012f1fbb0af90e5da49fa7bf0d34e3a067795703b74aef75427d"},
|
||||
"phoenix_html": {:hex, :phoenix_html, "3.1.0", "0b499df05aad27160d697a9362f0e89fa0e24d3c7a9065c2bd9d38b4d1416c09", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "0c0a98a2cefa63433657983a2a594c7dee5927e4391e0f1bfd3a151d1def33fc"},
|
||||
"phoenix_live_view": {:hex, :phoenix_live_view, "0.17.5", "63f52a6f9f6983f04e424586ff897c016ecc5e4f8d1e2c22c2887af1c57215d8", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.5.9 or ~> 1.6.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.1", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "c5586e6a3d4df71b8214c769d4f5eb8ece2b4001711a7ca0f97323c36958b0e3"},
|
||||
"phoenix_pubsub": {:hex, :phoenix_pubsub, "2.0.0", "a1ae76717bb168cdeb10ec9d92d1480fec99e3080f011402c0a2d68d47395ffb", [:mix], [], "hexpm", "c52d948c4f261577b9c6fa804be91884b381a7f8f18450c5045975435350f771"},
|
||||
"plug": {:hex, :plug, "1.11.1", "f2992bac66fdae679453c9e86134a4201f6f43a687d8ff1cd1b2862d53c80259", [:mix], [{:mime, "~> 1.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "23524e4fefbb587c11f0833b3910bfb414bf2e2534d61928e920f54e3a1b881f"},
|
||||
"plug_crypto": {:hex, :plug_crypto, "1.2.1", "5c854427528bf61d159855cedddffc0625e2228b5f30eff76d5a4de42d896ef4", [:mix], [], "hexpm", "6961c0e17febd9d0bfa89632d391d2545d2e0eb73768f5f50305a23961d8782c"},
|
||||
"plug_crypto": {:hex, :plug_crypto, "1.2.2", "05654514ac717ff3a1843204b424477d9e60c143406aa94daf2274fdd280794d", [:mix], [], "hexpm", "87631c7ad914a5a445f0a3809f99b079113ae4ed4b867348dd9eec288cecb6db"},
|
||||
"rustler": {:hex, :rustler, "0.21.1", "5299980be32da997c54382e945bacaa015ed97a60745e1e639beaf6a7b278c65", [:mix], [{:toml, "~> 0.5.2", [hex: :toml, repo: "hexpm", optional: false]}], "hexpm", "6ee1651e10645b2b2f3bb70502bf180341aa058709177e9bc28c105934094bc6"},
|
||||
"telemetry": {:hex, :telemetry, "0.4.2", "2808c992455e08d6177322f14d3bdb6b625fbcfd233a73505870d8738a2f4599", [:rebar3], [], "hexpm", "2d1419bd9dda6a206d7b5852179511722e2b18812310d304620c7bd92a13fcef"},
|
||||
"telemetry": {:hex, :telemetry, "0.4.3", "a06428a514bdbc63293cd9a6263aad00ddeb66f608163bdec7c8995784080818", [:rebar3], [], "hexpm", "eb72b8365ffda5bed68a620d1da88525e326cb82a75ee61354fc24b844768041"},
|
||||
"toml": {:hex, :toml, "0.5.2", "e471388a8726d1ce51a6b32f864b8228a1eb8edc907a0edf2bb50eab9321b526", [:mix], [], "hexpm", "f1e3dabef71fb510d015fad18c0e05e7c57281001141504c6b69d94e99750a07"},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user