Heroicons CSS
View SourceThis 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 being2.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