{"id":19651419,"url":"https://github.com/sourceboat/tabler_icons_elixir","last_synced_at":"2025-04-28T16:31:32.537Z","repository":{"id":63911193,"uuid":"565743161","full_name":"sourceboat/tabler_icons_elixir","owner":"sourceboat","description":"This package provides Elixir functions in order to use Tabler Icons in your HTML, styled with arbitrary classes.","archived":false,"fork":false,"pushed_at":"2024-07-29T08:51:59.000Z","size":4232,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"develop","last_synced_at":"2025-04-05T09:51:05.308Z","etag":null,"topics":["elixir","phoenix-framework","phoenix-liveview"],"latest_commit_sha":null,"homepage":"https://hex.pm/packages/tabler_icons","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sourceboat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-14T08:30:20.000Z","updated_at":"2024-10-21T15:19:27.000Z","dependencies_parsed_at":"2023-10-05T08:30:02.432Z","dependency_job_id":"74c376ba-6146-4a29-8a50-6a2a19ae2044","html_url":"https://github.com/sourceboat/tabler_icons_elixir","commit_stats":{"total_commits":108,"total_committers":6,"mean_commits":18.0,"dds":0.2314814814814815,"last_synced_commit":"f5c3a91c68d10c36f1c747b656536567850d51d2"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sourceboat%2Ftabler_icons_elixir","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sourceboat%2Ftabler_icons_elixir/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sourceboat%2Ftabler_icons_elixir/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sourceboat%2Ftabler_icons_elixir/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sourceboat","download_url":"https://codeload.github.com/sourceboat/tabler_icons_elixir/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251345934,"owners_count":21574807,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elixir","phoenix-framework","phoenix-liveview"],"created_at":"2024-11-11T15:06:29.102Z","updated_at":"2025-04-28T16:31:27.524Z","avatar_url":"https://github.com/sourceboat.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tabler Icons\n\n[![CI](https://github.com/sourceboat/ex_tabler_icons/actions/workflows/ci.yml/badge.svg)](https://github.com/sourceboat/ex_tabler_icons/actions/workflows/ci.yml)\n[![Hex](https://img.shields.io/hexpm/v/tabler_icons.svg)](https://hex.pm/packages/tabler_icons)\n[![Hex Docs](https://img.shields.io/badge/hex-docs-green)](https://hexdocs.pm/tabler_icons/TablerIcons.html)\n\n\u003e [!CAUTION]\n\u003e We have stopped maintaining this package because there is a better way to integrate Tabler Icons into your project without using a package. \n\u003e This package still supports the integration of Tabler Icons v2.47.0, but will not be updated to newer versions.\n\u003e It is recommended to integrate Tabler Icons via a Tailwind CSS plugin approach. See [Integrate Tabler Icons via Tailwind CSS Plugin](#integrate-tabler-icons-via-tailwind-css-plugin) for a detailed explanation.\n\n[Tabler Icons](https://tabler-icons.io/) are free and open source icons. This package provides Elixir functions in order to use [Tabler Icons](https://tabler-icons.io/) in your HTML, styled with arbitrary classes.\n\nThis package is strongly inspired by [heroicons_elixir](https://github.com/mveytsman/heroicons_elixir).\n\n\u003e Note: As we are dealing with over 3.000 icons and an output file with more than 70.000 lines of code, the compile time may be longer than usual.\n\n## Installation\n\nThe package can be installed by adding `tabler_icons` to your list of dependencies in `mix.exs`:\n\n```elixir\ndef deps do\n  [\n    {:tabler_icons, \"~\u003e 0.6.0\"}\n  ]\nend\n```\n\n## Usage\n\n```eex\n\u003cTablerIcons.user /\u003e\n\u003cTablerIcons.icon name={:user} /\u003e\n```\n\nYou may pass arbitrary HTML attributes to the components:\n\n```eex\n\u003cTablerIcons.user class=\"w-2 h-2\" /\u003e\n\u003cTablerIcons.icon name={:user} class=\"w-2 h-2\" /\u003e\n```\n\nFor additional information and list of all icons see [the docs](https://hexdocs.pm/tabler_icons/TablerIcons.html).\n\n## Naming\n\nWe are interested in keeping the same icon names for our functions TablerIcons provides to us. Nevertheless, Elixir do not allow function names to begin with a number. Therefore we had to add some exceptions:\n\n- `2fa` -\u003e `two_fa`\n- `3d-cube-sphere-off` -\u003e `three_d_cube_sphere_off`\n- `3d-cube-sphere` -\u003e `three_d_cube_sphere`\n- `3d-rotate` -\u003e `three_d_rotate`\n- `24-hours` -\u003e `twenty_four_hours`\n- `12-hours` -\u003e `twelve_hours`\n- `123` -\u003e `one_two_three`\n- `360-view` -\u003e `three_sixty_view`\n- `360` -\u003e `three_sixty`\n\nA hyphen is replaced by an underscore automatically.\n\n## Update TablerIcons version\n\nYou can find the current TablerIcons version in `lib/tabler_icons.ex`.\n\nUpdating the TablerIcons version is usually done by the maintainers of this package so you may ignore this.\n\n1. Check whether there are icon names that begin with a number and add exception to `lib/mix/tasks/build.ex` (add icon name to readme).\n2. Update TablerIcons version in `lib/mix/tasks/download.ex`.\n3. Run `mix download` in order to download newest icons into `/assets`.\n4. Run `mix build` in order to build new `lib/tabler_icons.ex` file based on the icons.\n5. Update version in `mix.exs`.\n6. Update repository with the corresponding changes.\n7. Release new version of the package.\n\n## Integrate Tabler Icons via Tailwind CSS Plugin\n\nThe recommended way to integrate Tabler Icons into your project is to use a Tailwind CSS plugin. The following sections will give you a detailed explanation on how to update your project to integrate Tabler Icons without using a package. This approach is similar to how Phoenix includes Herocions in newly generated applications.\n\n### Track the Tabler Icons source repository with Mix\n\nThe following code allows you to track the Tabler Icons source repository in your project dependencies.\n\n```elixir\n# mix.exs\ndefp deps do\n  [\n    ...\n    {:tabler_icons,\n      github: \"tabler/tabler-icons\", \n      sparse: \"icons\",\n      app: false, \n      compile: false, \n      depth: 1}\n  ]\nend\n```\n\n### Add a Tailwind CSS plugin\n\nAdd the following code to your `tailwind.config.js` to create a Tailwind CSS plugin that extracts the icons from your dependencies and provides the necessary CSS to use them.\n\n```js\n// tailwind.config.js\nconst plugin = require('tailwindcss/plugin')\nconst fs = require('fs')\nconst path = require('path')\n\nmodule.exports = {\n  // ...\n  plugins: [\n    plugin(function ({ matchComponents, theme }) {\n      const iconsDir = path.join(__dirname, \"../deps/tabler_icons/icons\")\n      const values = {}\n      const icons = [\n        [\"\", \"/outline\"],\n        [\"-filled\", \"/filled\"],\n      ]\n      icons.forEach(([suffix, dir]) =\u003e {\n        fs.readdirSync(path.join(iconsDir, dir)).forEach(file =\u003e {\n          const name = path.basename(file, \".svg\") + suffix\n          values[name] = { name, fullPath: path.join(iconsDir, dir, file) }\n        })\n      })\n      matchComponents({\n        \"tabler\": ({ name, fullPath }) =\u003e {\n          const content = fs.readFileSync(fullPath).toString()\n            .replace(/\\r?\\n|\\r/g, \"\")\n            .replace(/width=\"[^\"]*\"/, \"\")\n            .replace(/height=\"[^\"]*\"/, \"\");\n\n          return {\n            [`--tabler-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,\n            \"-webkit-mask\": `var(--tabler-${name})`,\n            \"mask\": `var(--tabler-${name})`,\n            \"mask-repeat\": \"no-repeat\",\n            \"background-color\": \"currentColor\",\n            \"vertical-align\": \"middle\",\n            \"display\": \"inline-block\",\n            \"width\": theme(\"spacing.5\"),\n            \"height\": theme(\"spacing.5\")\n          }\n        }\n      }, { values })\n    })\n  ]\n}\n```\n\n### Create an icon component\n\nAdd the following `icon` component to your `core_components.ex` to use Tabler Icons in your markup.\n\n```elixir\ndefmodule MyAppWeb.CoreComponents do\n  use Phoenix.Component\n\n  attr :name, :string, required: true\n  attr :class, :string, default: nil\n\n  def icon(%{name: \"tabler-\" \u003c\u003e _} = assigns) do\n    ~H\"\"\"\n    \u003cspan class={[@name, @class]} /\u003e\n    \"\"\"\n  end\nend\n```\n\nYou can use the component in your markup like this to use Tabler Icons:\n\n```elixir\n\u003c.icon name=\"tabler-user\" class=\"bg-red-600\" /\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsourceboat%2Ftabler_icons_elixir","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsourceboat%2Ftabler_icons_elixir","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsourceboat%2Ftabler_icons_elixir/lists"}