Heroicons CSS

View Source

This package will import the icon set from Heroicons including all available variants.

Check them at heroicons!

Heroicons is shipped by default in Phoenix but the package is imported as a Github dependency.

defp deps do
  [
    #...
    {:tailwind, "~> 0.3", runtime: Mix.env() == :dev},
    {:heroicons,
     github: "tailwindlabs/heroicons",
     tag: "v2.1.1",
     sparse: "optimized",
     app: false,
     compile: false,
     depth: 1},
    {:swoosh, "~> 1.16"},
    #...
  ]
end

With this package you can import them using regular hexpm dependency in case you need that.

defp deps do
  [
    #...
    {:tailwind, "~> 0.3", runtime: Mix.env() == :dev},
    {:heroicons_css, "2.2.0", compile: false, app: false},
    {:swoosh, "~> 1.16"},
    #...
  ]
end

Here are some reasons for wanting to use a Hexpm package:

  • easier to update using regular Hexpm versioning (e.g. latest)
  • when builders in CI/CD pipelines do not have git installed
  • get a cleaner mix.exs file with all the deps in one line (thus easily sortable alphabetically)

Installation

The package can be installed by adding heroicons_css to your list of dependencies in mix.exs:

def deps do
  [ 
    # ...,
    {:heroicons_css, ">= 0.0.0", compile: false, app: false}
  ]
end

Note: Using ">= 0.0.0", you'll be sure to always get the latest version of the icons currently being 2.2.0.

Updating the default heroicons.js file

You will need to update the icons deps path in assets/vendor/heroicons.js (default Phoenix path)

// assets/vendor/heroicons.js
-  let iconsDir = path.join(__dirname, "../../deps/heroicons/optimized")
+  let iconsDir = path.join(__dirname, "../../deps/heroicons_css/optimized")

Everything else will just work the same way than default Phoenix.

Disclaimer

This package is not affiliated with Heroicons nor Tailwind Labs/Tailwind CSS.

This repo is using the TailwindLabs Heroicons repository as a source: tailwindlabs/heroicons.

Particularly the icons from the optimized folder as in the default Phoenix configuration.

The version of this package should match the Heroicons version.

License

MIT