{"id":13808638,"url":"https://github.com/pierreavn/angular-tabler-icons","last_synced_at":"2025-05-14T02:32:18.401Z","repository":{"id":37103200,"uuid":"369501617","full_name":"pierreavn/angular-tabler-icons","owner":"pierreavn","description":"Tabler Icons components library for your Angular applications","archived":false,"fork":false,"pushed_at":"2024-03-25T21:41:25.000Z","size":4065,"stargazers_count":20,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-26T17:08:50.337Z","etag":null,"topics":["angular","components","icons","library","svg","tabler"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/angular-tabler-icons","language":"TypeScript","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/pierreavn.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":"2021-05-21T10:40:55.000Z","updated_at":"2024-06-03T13:48:57.523Z","dependencies_parsed_at":"2022-06-24T11:41:41.751Z","dependency_job_id":"8e889d66-0dfd-4f87-a23c-0f2195964566","html_url":"https://github.com/pierreavn/angular-tabler-icons","commit_stats":null,"previous_names":[],"tags_count":134,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreavn%2Fangular-tabler-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreavn%2Fangular-tabler-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreavn%2Fangular-tabler-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreavn%2Fangular-tabler-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pierreavn","download_url":"https://codeload.github.com/pierreavn/angular-tabler-icons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273256,"owners_count":17448074,"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":["angular","components","icons","library","svg","tabler"],"created_at":"2024-08-04T01:01:47.830Z","updated_at":"2024-11-19T00:30:57.450Z","avatar_url":"https://github.com/pierreavn.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Icons"],"readme":"# angular-tabler-icons\n\n[![tabler-icons-version](https://img.shields.io/badge/Tabler%20Icons-v3.1.0-%23206bc4?style=flat-square)](https://tabler.io/icons)\n[![license](https://img.shields.io/npm/l/angular-tabler-icons.svg?style=flat-square)]()\n[![downloads](https://img.shields.io/npm/dm/angular-tabler-icons?style=flat-square)]()\n\n## Description\n\nThis package allows you to use the [Tabler Icons](https://tabler.io/icons) in your angular applications. Tabler Icons is a set of free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24x24 grid and a 2px stroke.  \n  \nInspired by [angular-feather](https://github.com/michaelbazos/angular-feather), thank you to the author.\n\n## Usage\n\n_1. Install the package_\n\n```sh\nnpm install angular-tabler-icons\n# or\nyarn add angular-tabler-icons\n```\n\n_2. Generate a module to host the icons you'll import_\n \n```sh\nng generate module icons\n```\n  \n_3. Import assets_ \n\nYou need to import:\n - TablerIconsModule, as it contains the `\u003ci-tabler\u003e` component\n - The icons that you need\n\nWe put this in IconsModule for modularity. See example below:\n\n\n*file: icon.module.ts*\n```ts  \nimport { NgModule } from '@angular/core';\n\nimport { TablerIconsModule } from 'angular-tabler-icons';\nimport { IconCamera, IconHeart, IconBrandGithub } from 'angular-tabler-icons/icons';\n\n// Select some icons (use an object, not an array)\nconst icons = {\n  IconCamera,\n  IconHeart,\n  IconBrandGithub\n};\n\n@NgModule({\n  imports: [\n    TablerIconsModule.pick(icons)\n  ],\n  exports: [\n    TablerIconsModule\n  ]\n})\nexport class IconsModule { }\n\n// NOTES:\n// 1. We add TablerIconsModule to the 'exports', since the \u003ci-tabler\u003e component will be used in templates of parent module\n// 2. Don't forget to pick some icons using TablerIconsModule.pick({ ... })\n```\n\n_4. Import IconsModule_\n\nIf you are using NgModules, import it this way:\n```ts\nimport { NgModule } from \"@angular/core\";\nimport { MyComponent } from './my/my.component';\nimport { IconsModule } from \"./icons.module\";\n\n@NgModule({\n  declarations: [MyComponent],\n  imports: [\n    IconsModule, // \u003c--- Here\n  ],\n})\nexport class MyModule {}\n```\n\nIf you are using Standalone Components, import it this way:\n```ts\nimport { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RouterOutlet } from '@angular/router';\nimport { IconsModule } from './icons.module';\n\n@Component({\n  selector: 'app-my',\n  standalone: true,\n  imports: [CommonModule, RouterOutlet, IconsModule], // \u003c--- Here\n  templateUrl: './my.component.html',\n  styleUrls: ['./my.component.scss']\n})\nexport class MyComponent {}\n```\n\n\n_5. Use it in template_\n\nAfter importing the _IconsModule_ in your feature or shared module, use the icons as follows:\n\n```html\n\u003ci-tabler name=\"camera\"\u003e\u003c/i-tabler\u003e\n\u003ci-tabler name=\"heart\" style=\"color: red;\"\u003e\u003c/i-tabler\u003e\n\u003ci-tabler name=\"heart-filled\" style=\"color: red;\"\u003e\u003c/i-tabler\u003e\n\u003ci-tabler name=\"brand-github\" class=\"someclass\"\u003e\u003c/i-tabler\u003e\n```\n\n## Available icons\n\nList of available icons: https://tabler.io/icons \n  \nThis version includes **Tabler Icons v3.1.0**, see [changelog](https://tabler.io/icons/changelog) to know which icons are available.\n\n\n## Styling icons\n\nEach icon can be styled separately with CSS:\n\n```html\n\u003ci-tabler name=\"camera\" class=\"big fill-red stroke-blue thin\"\u003e\u003c/i-tabler\u003e\n```\n\n```css\n.big {\n  height: 50px;\n  width: 50px;\n}\n\n.fill-red {\n  fill: red;\n}\n\n.stroke-blue {\n  color: blue;\n}\n\n.thin {\n  stroke-width: 1px;\n}\n```\n\n## Options\n\nSome options are available to configure the module:\n\n```ts\nimport { environment } from '../environments/environment';\nimport { TablerIconsModule } from 'angular-tabler-icons';\nimport * as TablerIcons from 'angular-tabler-icons/icons';\n\n@NgModule({\n  imports: [\n    TablerIconsModule.pick(TablerIcons, {\n\n      // Ignore warnings, such as \"Tabler Icon not found\", for example:\n      //   ignoreWarnings: environment.production,\n      ignoreWarnings: true,\n\n    })\n  ],\n  exports: [\n    TablerIconsModule\n  ]\n})\nexport class IconsModule { }\n```\n\n## Pick all icons\n\nYou can import all icons at once by doing the following. However, keep in mind that by doing this, all icons will end up in your application bundle. While this may not be much of an issue for prototyping, **it is not recommended for any application that you plan to release**.\n\n```ts\nimport { TablerIconsModule } from 'angular-tabler-icons';\nimport * as TablerIcons from 'angular-tabler-icons/icons';\n\n@NgModule({\n  imports: [\n    TablerIconsModule.pick(TablerIcons)\n  ],\n  exports: [\n    TablerIconsModule\n  ]\n})\nexport class IconsModule { }\n```\n\n## Angular version compatibility\n| Angular | angular-tabler-icons |\n|---------|----------------------|\n| 17      | 2.40.1+              |\n| 16      | 2.21.1+              |\n| 15      | 1.117.1+             |\n| 14      | 1.72.1+              |\n| 13      | 1.53.1+              |\n| 12      | 1.41.3+              |\n| 11      | 1.41.0+              |\n\n## Contributing\n\nFeel free to report issues or to contibute to this project!  \nHere are few tips to start:\n```bash\n$ yarn lib:generate  # generate components from Tabler Icons\n$ yarn lib:build  # build angular library\n```\n\n## How to rebuild for newer tabler icons version\n\n1. Run GitHub actions workflow `Automatic PR on Tabler Icons Release`, with new Tabler Icons version (e.g. `2.40.0`). This workflow will create automatically a new Pull Request.\n2. Approve and Merge the generated Pull Request.\n3. Create a release/tag with the new Tabler Icons version.\n  \nPackage is automatically rebuilt and published, with the GitHub actions workflow `Build and Publish package`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierreavn%2Fangular-tabler-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpierreavn%2Fangular-tabler-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierreavn%2Fangular-tabler-icons/lists"}