icons-angular package

.gitignore

@@ -28,9 +28,9 @@ packages/icons*/icons/*
 packages/icons*/src/icons/*
 packages/icons*/src/icons.js
 packages/icons*/src/icons.ts
+packages/icons*/src/aliases.ts
 packages/icons*/LICENSE
 packages/icons*/stats/*
-packages/icons*/icons/*
 
 .turbo
 .sass-cache

package.json

@@ -34,6 +34,7 @@
     "build:copy": "rm -rf ./icons && mkdir ./icons && cp ./_site/tags.json tags.json && cp ./_site/icons/* ./icons/ && rm -rf ./_site/",
     "build:packages": "pnpm run build:icons && pnpm run build:sprite && pnpm run build:react && pnpm run build:react-native && pnpm run build:preact && pnpm run build:solidjs && pnpm run build:svelte && pnpm run build:vue && pnpm run build:png && pnpm run build:pdf && pnpm run build:esp && pnpm run build:webfont",
     "build:icons": "pnpm --filter @tabler/icons build",
+    "build:angular": "pnpm --filter @tabler/icons-angular build",
     "build:react": "pnpm --filter @tabler/icons-react build",
     "build:react-native": "pnpm --filter @tabler/icons-react-native build",
     "build:preact": "pnpm --filter @tabler/icons-preact build",

packages/icons-angular/.gitignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

packages/icons-angular/README.md

@@ -0,0 +1,212 @@
+# Tabler Icons for Angular
+
+<p align="center">
+<img src="https://raw.githubusercontent.com/tabler/tabler-icons/main/.github/packages/og-package-angular.png" alt="Tabler Icons" width="838">
+</p>
+
+<p align="center">
+  Implementation of the Tabler Icons library for Angular applications.
+<p>
+
+<p align="center">
+  <a href="https://tabler.io/icons/"><strong>Browse all icons at tabler.io &rarr;</strong></a>
+</p>
+
+<p align="center">
+    <a href="https://github.com/tabler/tabler-icons/releases"><img src="https://img.shields.io/npm/v/@tabler/icons" alt="Latest Release"></a>
+    <a href="https://github.com/tabler/tabler-icons/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/@tabler/icons.svg" alt="License"></a>
+</p>
+
+## Sponsors
+
+**If you want to support our project and help us grow it, you can [become a sponsor on GitHub](https://github.com/sponsors/codecalm) or just [donate on PayPal](https://paypal.me/codecalm) :)**
+
+<a href="https://github.com/sponsors/codecalm">
+  <img src='https://raw.githubusercontent.com/tabler/static/main/sponsors.png'>
+</a>
+
+## Prerequisites
+
+The minimal supported version of Angular is 16.0.0.
+
+## Installation
+
+```
+yarn add @tabler/icons-angular
+```
+
+or
+
+```
+npm install @tabler/icons-angular
+```
+
+or
+
+```
+pnpm install @tabler/icons-angular
+```
+
+## How to use
+
+It's build with ESmodules so it's tree-shakable. You decide which icons to include.
+
+You can include icons by providing them with `TablerIconModule` or by importing `TablerIcon` objects in a single component.
+
+### I. Using the provider
+
+#### 1a. Import with NgModules
+
+In a module in which the icons are needed or in a main module
+```ts
+import { TablerIconComponent, TablerIconModule, IconBrandAngular, IconHome } from '@tabler/icons-angular';
+
+@NgModule({
+  imports: [TablerIconModule.pick({ IconBrandAngular, IconHome }), TablerIconComponent]
+  // other configuration
+})
+export class AppModule { }
+```
+
+#### 1b. Import without NgModules
+
+In `main.ts`
+
+```ts
+import { TablerIconModule, IconBrandAngular } from '@tabler/icons-angular';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    importProvidersFrom(TablerIconModule.pick({ IconBrandAngular }))
+  ]
+})
+```
+
+or in a route configuration
+
+```ts
+import { IconBrandAngular, TablerIconModule } from '@tabler/icons-angular';
+
+export const routes: Routes = [
+  {
+    path: 'demo',
+    component: DemoComponent,
+    providers: [importProvidersFrom(TablerIconModule.pick({ IconBrandAngular }))]
+  }
+];
+```
+
+In a standalone component which needs a TablerIconComponent
+
+```ts
+import { TablerIconComponent } from '@tabler/icons-angular';
+
+@Component({
+  imports: [TablerIconComponent],
+  standalone: true,
+  // other configuration
+})
+export class DemoComponent { }
+```
+
+#### 2. Use an icon component in a template
+
+```html
+<tabler-icon icon="icon-brand-angular"></tabler-icon>
+<tabler-icon icon="brand-angular"></tabler-icon>
+```
+
+### II. Importing an icon object
+
+#### 1a. Import with NgModules
+
+In a module in which the icons are needed or in a main module:
+```ts
+import { TablerIconComponent, TablerIconModule } from '@tabler/icons-angular';
+
+@NgModule({
+  imports: [TablerIconModule, TablerIconComponent]
+  // other configuration
+})
+export class AppModule { }
+```
+
+#### 1b. Import in a standalone component
+
+```ts
+import { TablerIconComponent, IconBrandAngular } from '@tabler/icons-angular';
+
+@Component({
+  imports: [TablerIconComponent],
+  standalone: true,
+  // other configuration
+})
+export class AppComponent {
+  iconBrandAngular = IconBrandAngular;
+}
+```
+
+#### 2. Use an icon component in a template
+
+```html
+<tabler-icon [icon]="iconBrandAngular"></tabler-icon>
+```
+
+## Props
+
+| name          | type     | default      |
+| ------------- |----------| ------------ |
+| `size`        | _number_ | 24           |~~~~
+| `color`       | _string_ | currentColor |
+| `stroke`      | _number_ | 2            |
+
+```html
+<tabler-icon icon="brand-angular" [size]="48" color="blue" [stroke]="1.75" class="my-icon"></tabler-icon>
+```
+
+## Global configuration
+
+If you want to change default property values globally you can overwrite `TablerIconConfig` using providers.
+You are able to set all three properties or just some of them.
+
+```ts
+{
+  provide: TablerIconConfig, useValue: {
+    size: 40,
+    stroke: 1,
+    color: 'blue'
+  }
+}
+```
+
+```ts
+{ provide: TablerIconConfig, useValue: { size: 40 } }
+```
+
+## Loading all icons
+
+There is also a possibility to import all icons at once but this can cause a **significant growth of your application build size**.
+
+```ts
+import { icons, TablerIconComponent, TablerIconModule } from '@tabler/icons-angular';
+
+@NgModule({
+  imports: [TablerIconModule.pick(icons), TablerIconComponent],
+  // other configuration
+})
+export class AppModule {}
+```
+
+## Contributing
+
+For more info on how to contribute please see the [contribution guidelines](https://github.com/tabler/tabler-icons/blob/main/CONTRIBUTING.md).
+
+Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/tabler/tabler-icons/blob/main/packages/icons-react/README.md)
+
+## License
+
+Tabler Icons is licensed under the [MIT License](https://github.com/tabler/tabler-icons/blob/master/LICENSE).
+
+## Sponsor Tabler
+
+<a href="https://github.com/sponsors/codecalm" target="_blank"><img src="https://github.com/tabler/tabler/raw/dev/src/static/sponsor-banner-readme.png?raw=true" alt="Sponsor Tabler" /></a>

packages/icons-angular/angular.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "icons-angular": {
+      "projectType": "library",
+      "root": ".",
+      "sourceRoot": "src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "tsConfig": "tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "karmaConfig": "karma.conf.js"
+          }
+        }
+      }
+    }
+  }
+}

packages/icons-angular/build.mjs

@@ -0,0 +1,36 @@
+import { buildJsIcons } from '../../.build/build-icons.mjs';
+import prettier from '@prettier/sync';
+
+const componentTemplate = ({ type, name, namePascal, children }) => {
+  const nodes = JSON.stringify(Array.isArray(children) ? children : [children]);
+
+  return prettier.format(
+    `import { TablerIcon } from '../types';
+
+    const ${namePascal}: TablerIcon = {
+      name: '${name}',
+      type: '${type}',
+      nodes: ${nodes}
+    };
+
+    export default ${namePascal};`,
+    { singleQuote: true, printWidth: 120, parser: 'typescript' });
+};
+
+const indexItemTemplate = ({
+                             _,
+                             namePascal
+                           }) => `export { default as ${namePascal}} from './${namePascal}';`;
+
+const aliasTemplate = ({ fromPascal, toPascal }) => `export { default as Icon${fromPascal}} from './icons/Icon${toPascal}';\n`;
+
+buildJsIcons({
+  name: 'icons-angular',
+  componentTemplate,
+  indexItemTemplate,
+  aliasTemplate,
+  indexFile: 'index.ts',
+  pascalCase: true,
+  extension: 'ts',
+  pretty: false
+});

packages/icons-angular/karma.conf.js

@@ -0,0 +1,39 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/icons-angular'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    browsers: ['Chrome'],
+    restartOnFileChange: true
+  });
+};