Git Product home page Git Product logo

heroicons_elixir's Introduction

Heroicons

Heroicons are "a set of free MIT-licensed high-quality SVG icons for you to use in your web projects". This package gives you Elixir functions to drop Heroicons into your HTML, styled with arbitrary classes.

This library provides optimized svgs for each Heroicon packaged as a Phoenix Component.

Heroicons are designed by Steve Schoger

Current Heroicons Version: 2.1.1.

Installation

Add Heroicons to your mix.exs:

defp deps do
  [
    {:heroicons, "~> 0.5.5"}
  ]
end

After that, run mix deps.get.

Usage

The components are provided by the Heroicons module. Each icon is a Phoenix Component you can use in your HEEx templates.

By default, the icon components will use the outline style, but the solid, mini or micro attributes may be passed to select styling, for example:

<Heroicons.cake />
<Heroicons.cake solid />
<Heroicons.cake mini />
<Heroicons.cake micro />

You can also pass arbitrary HTML attributes to the components, such as classes:

<Heroicons.cake class="w-2 h-2" />
<Heroicons.cake solid class="w-2 h-2 text-gray-500" />

For a full list of icons see the docs or heroicons.com.

heroicons_elixir's People

Contributors

chrismccord avatar gigitsu avatar greven avatar jwbaldwin avatar martimatix avatar msmithstubbs avatar mveytsman avatar nathanmalishev avatar quentin-bettoum avatar rktjmp avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

heroicons_elixir's Issues

This package prevents using Phoenix Live View 0.19

The mix.exs file has:

{:phoenix_live_view, "~> 0.18.2"},

If you try to use Live View 0.19 and this package you get this error:

#0 2.180 Because "your app" depends on "heroicons 0.5.2" which depends on "phoenix_live_view ~> 0.18.2", "phoenix_live_view ~> 0.18.2" is required.
#0 2.180 So, because "your app" depends on "phoenix_live_view 0.19.0", version solving failed.

Warnings on latest in heex templates

Hey there, thanks for this package, we love it!

I've noticed in the latest release I get a warning when using apply, like so:

  @doc """
  Accepts the following attributes:

    * name
    * outlined
    * and any other HTML attribute: class, aria-label, etc

  ## Examples

      <.icon name={:home} outlined class="text-gray-400" />
      <.icon name={:home} class="text-gray-400" />
      <.icon name={:home} />
  """
  def icon(assigns) do
    assigns =
      assigns
      |> assign_new(:outlined, fn -> false end)
      |> assign_new(:class, fn -> "w-4 h-4 inline-block" end)
      |> assign_new(:"aria-hidden", fn -> !Map.has_key?(assigns, :"aria-label") end)

    ~H"""
    <%= if @outlined do %>
      <%= apply(Heroicons.Outline, @name, [assigns_to_attributes(assigns, [:outlined, :name])]) %>
    <% else %>
      <%= apply(Heroicons.Solid, @name, [assigns_to_attributes(assigns, [:outlined, :name])]) %>
    <% end %>
    """
  end

With the following warning:

warning: <%= chart_bar(class: "..." %> is deprecated, please use <.chart_bar class="..." /> inside HEEx templates instead
  (heroicons 0.3.0) lib/heroicons.ex:27: Heroicons.Outline.chart_bar/1
  (my_app 0.1.0) lib/myapp_web/live/live_helpers.ex:103: anonymous fn/2 in MyAppWeb.LiveHelpers.icon/1
  (phoenix_live_view 0.17.6) lib/phoenix_live_view/engine.ex:124: Phoenix.HTML.Safe.Phoenix.LiveView.Rendered.to_iodata/1
  (phoenix_live_view 0.17.6) lib/phoenix_live_view/engine.ex:140: Phoenix.HTML.Safe.Phoenix.LiveView.Rendered.to_iodata/3
  (my_app 0.1.0) lib/myapp_web/live/live_helpers.ex:123: anonymous fn/2 in MyAppWeb.LiveHelpers.link/1
  (phoenix_live_view 0.17.6) lib/phoenix_live_view/diff.ex:387: Phoenix.LiveView.Diff.traverse/7
  (phoenix_live_view 0.17.6) lib/phoenix_live_view/diff.ex:515: anonymous fn/3 in Phoenix.LiveView.Diff.traverse_comprehension/4
  (elixir 1.13.2) lib/enum.ex:1715: Enum."-map_reduce/3-lists^mapfoldl/2-0-"/3
  (elixir 1.13.2) lib/enum.ex:1715: Enum."-map_reduce/3-lists^mapfoldl/2-0-"/3
  (phoenix_live_view 0.17.6) lib/phoenix_live_view/diff.ex:462: Phoenix.LiveView.Diff.traverse/7
  (phoenix_live_view 0.17.6) lib/phoenix_live_view/diff.ex:486: anonymous fn/4 in Phoenix.LiveView.Diff.traverse_dynamic/7
  (elixir 1.13.2) lib/enum.ex:2396: Enum."-reduce/3-lists^foldl/2-0-"/3
  (phoenix_live_view 0.17.6) lib/phoenix_live_view/diff.ex:387: Phoenix.LiveView.Diff.traverse/7
  (phoenix_live_view 0.17.6) lib/phoenix_live_view/diff.ex:486: anonymous fn/4 in Phoenix.LiveView.Diff.traverse_dynamic/7
  (elixir 1.13.2) lib/enum.ex:2396: Enum."-reduce/3-lists^foldl/2-0-"/3
  (phoenix_live_view 0.17.6) lib/phoenix_live_view/diff.ex:387: Phoenix.LiveView.Diff.traverse/7
  (phoenix_live_view 0.17.6) lib/phoenix_live_view/diff.ex:138: Phoenix.LiveView.Diff.render/3
  (phoenix_live_view 0.17.6) lib/phoenix_live_view/static.ex:244: Phoenix.LiveView.Static.to_rendered_content_tag/4

Downgrading to 0.2.2 removes the warning. I noticed recently there was in change in how things were generated, but I wasn't 100% sure without a changelog or commits to mark the 0.3 release. Any ideas?

Missing icon

๐Ÿ‘‹๐Ÿผ Hi there! I'm trying to find the refresh icon, but it doesn't seem to exist in the library, or at least I can't find it. Is it possible to add it? Do you accept PRs?
Thanks in advance ๐Ÿ™Œ๐Ÿผ

Update to Heroicons v2.1.1

As per the title, is there any plan to update icons to the latest version (2.1.1)?

If I'm not mistaken, it's sufficient to run the heroicons.update task, I can make a PR with updated icons.

Dynamic icons

Is there an easy way to pass in the icon name as an argument?

eg:

<Heroicons.icon name="academic-cap" class="h-4 w-4" />

Allow `outline` attribute

Currently outline is the implicit default, but one cannot explicitly use outline as an attribute on heroicons like so: <Heroicons.photo outline />

Shamelessly copy for Phosphor?

Hi Max, thanks for this great library!

Is it ok if i fork it and adapt to use Phosphor instead of Heroicons? Also, can i later publish it on hex?

Thanks again!
Pedro

Specify the stroke-width of the path

Would it be possible to add an option to change the stroke-width attribute of the path element in the SVG?

For my current case I'd like to use a Heroicon but with stroke-width set to 1:

<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>

The tag could have an optional attribute so it would be called like:

<Heroicons.Outline.user_circle class="h6 w-6" stroke-width="1" />

Error when rendering icons without any style modifiers

The following code now raises an error with the latest version of heroicons -

<Heroicons.arrow_right_on_rectangle class="w-6 h-6 mr-2 inline" />

The function component arrow_right_on_rectangle does not define a micro attribute, so the svg function has no micro attribute in the assigns and falls through to the error clause.

Mix script to update SVGs from Github

Hey, first and foremost thanks for this.
I was using heroicons on my project but extracing the SVGs into a file and created a Macro to do the in-lining, but using the new Pheonix components is much better DX, so thanks for this package. :)

I was thinking it would be cool to have a way to update the SVGs (in priv) easily so it's easier to keep up with new releases?
Took some code from the Phoenix Tailwind and sass installers for the downloading part. After the unziping of the archive, we just copy the optimized directory contents to the priv folder.
Wrapped it into a heroicons.update Mix task.

If you think this is useful, I can open a PR.

My commit is here: greven@8b890e3

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.