{"id":13808628,"url":"https://github.com/marco-martins/angular-line-awesome","last_synced_at":"2025-05-14T02:32:12.915Z","repository":{"id":41655714,"uuid":"248544664","full_name":"marco-martins/angular-line-awesome","owner":"marco-martins","description":"Angular Line Awesome is an Angular component to manage Line Awesome icons.","archived":false,"fork":false,"pushed_at":"2024-10-10T14:25:39.000Z","size":2971,"stargazers_count":4,"open_issues_count":6,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-08T16:02:31.595Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://angular-line-awesome.herokuapp.com/","language":"JavaScript","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/marco-martins.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":"2020-03-19T15:56:39.000Z","updated_at":"2024-07-08T03:31:17.000Z","dependencies_parsed_at":"2024-01-14T23:57:52.994Z","dependency_job_id":"3e7853d6-12f7-4e09-8198-1832d0a9764c","html_url":"https://github.com/marco-martins/angular-line-awesome","commit_stats":{"total_commits":55,"total_committers":5,"mean_commits":11.0,"dds":"0.36363636363636365","last_synced_commit":"623b427faa974a9ff206e52e9fc15f65067fd02c"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marco-martins%2Fangular-line-awesome","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marco-martins%2Fangular-line-awesome/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marco-martins%2Fangular-line-awesome/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marco-martins%2Fangular-line-awesome/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marco-martins","download_url":"https://codeload.github.com/marco-martins/angular-line-awesome/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273251,"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":[],"created_at":"2024-08-04T01:01:47.662Z","updated_at":"2024-11-19T00:30:54.168Z","avatar_url":"https://github.com/marco-martins.png","language":"JavaScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Icons"],"readme":"# Angular Line Awesome\n\nAngular Line Awesome is an [Angular](https://angular.io) component to manage [Line Awesome](https://icons8.com/line-awesome) icons.\n\n_Click [here](https://angular-line-awesome.herokuapp.com/) to see the demo examples in the component page._\n\n# How to install\n\n**Install the package through [NPM](https://www.npmjs.com/package/angular-line-awesome)**\n\n`npm install angular-line-awesome`\n\n**Setup**\n\n1. Import { AngularLineAwesomeModule, LaIconLibrary } from \"angular-line-awesome\"\n2. Add AngularLineAwesomeModule to the imports array\n3. Inject LaIconLibrary into the constructor of the module\n4. Import an icon like \"lasHippo\" from \"angular-line-awesome/icons\"\n5. Add icon to the library with library.addIcons([lasHippo]) in the AppModule constructor\n\n```typescript\n//...\nimport { AngularLineAwesomeModule, LaIconLibrary } from 'angular-line-awesome';\nimport { lasHippo, lasHeart, labAngular } from 'angular-line-awesome/icons';\n\n@NgModule({\n //...\n imports: [\n //...\n AngularLineAwesomeModule\n ]\n //...\n})\nexport class AppModule {\n constructor(library: LaIconLibrary) {\n // Add an icon to the library for convenient access in other components\n library.addIcons([lasHippo, lasHeart, labAngular]);\n }\n}\n```\n\n# Usage and options\n\n| Name | Type | Options | Optional |\n| ---------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |\n| icon | `String, IconProp` | [Line Awesome Icons](https://icons8.com/line-awesome) \u003cbr\u003e \\*Ignore the **_las_** and **_la-_** part, this will be added by default.\\* | No |\n| title | `String` | Free text | Yes |\n| size | `String` | `xs, lg, sm, lx, 1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x` | Yes |\n| fixedWidth | `Boolean` | `true, false` | Yes |\n| rotate | `Number, String` | `90, 180, 270` | Yes |\n| flip | `String` | `horizontal, vertical, both` | Yes |\n| pull | `String` | `left, right` | Yes |\n| spin | `Boolean` | `true, false` | Yes |\n| pulse | `Boolean` | `true, false` | Yes |\n| border | `Boolean` | `true, false` | Yes |\n| inverse | `Boolean` | `true, false` | Yes |\n| transform | `String` | `grow-NUMBER,`\u003cbr\u003e `shrink-NUMBER,`\u003cbr\u003e `up-NUMBER,`\u003cbr\u003e `left-NUMBER,`\u003cbr\u003e `right-NUMBER,`\u003cbr\u003e `up-NUMBER,`\u003cbr\u003e `down-NUMBER,` \u003cbr\u003e `rotate-DEGREES,`\u003cbr\u003e `flip-v,` \u003cbr\u003e `flip-h` \u003cbr\u003e\u003cbr\u003e \\*NUMBER is a number representings pixel, DEGREES is a number representings degrees, e.g. **grow-1**, **rotate-90\\*** | Yes |\n\n**Examples**\n\n```html\n\u003cla-icon icon=\"hippo\"\u003e\u003c/la-icon\u003e\n\u003cla-icon icon=\"hippo\" size=\"2x\"\u003e\u003c/la-icon\u003e\n\u003cla-icon icon=\"hippo\" rotate=\"90\"\u003e\u003c/la-icon\u003e\n\u003cla-icon icon=\"hippo\" flip=\"horizontal\"\u003e\u003c/la-icon\u003e\n\u003cla-icon icon=\"hippo\" pull=\"right\"\u003e\u003c/la-icon\u003e\n\u003cla-icon icon=\"hippo\" spin=\"true\"\u003e\u003c/la-icon\u003e\n\u003cla-icon icon=\"hippo\" pulse=\"true\"\u003e\u003c/la-icon\u003e\n\u003cla-icon icon=\"hippo\" border=\"true\"\u003e\u003c/la-icon\u003e\n\u003cla-icon icon=\"hippo\" inverse=\"true\"\u003e\u003c/la-icon\u003e\n\u003cla-icon icon=\"las hippo\" transform=\"grow-10 down-4 right-8 rotate-45 flip-v flip-h\"\u003e\u003c/la-icon\u003e\n```\n\nNote: the prefix is not necessary because the library uses the prefix 'las' as default.\n\n**Angular bind sintaxe**\n\n```html\n\u003c!-- ['las', 'hippo'] is an array that indicates the [prefix, iconName] --\u003e\n\u003cla-icon [icon]=\"['las', 'hippo']\"\u003e\u003c/la-icon\u003e\n```\n\n---\n\n```javascript\n// component ts\nicon: IconProp = { prefix: 'lab', iconName: 'angular' };\n```\n\n```html\n\u003c!-- component view --\u003e\n\u003cla-icon [icon]=\"icon\"\u003e\u003c/la-icon\u003e\n```\n\n---\n\n```javascript\n// component ts\nicon: IconProp = ['lab', 'angular'];\niconSize: string = '2x';\n```\n\n```html\n\u003c!-- component view --\u003e\n\u003cla-icon [icon]=\"icon\" [size]=\"iconSize\"\u003e\u003c/la-icon\u003e\n```\n\n---\n\n```javascript\n// component ts\ntransform: Transform = { size: 1, x: 1, y: -1, rotate: 90, flipX: true, flipY: true };\n```\n\n```html\n\u003c!-- component view --\u003e\n\u003cla-icon icon=\"lab angular\" [transform]=\"transform\"\u003e\u003c/la-icon\u003e\n```\n\n## Important release notes and breaking changes\n\n**_18.0.x_**\n\n- Angular 18\n\n**_17.0.x_**\n\n- Angular 17\n\n**_16.0.x_**\n\n- Angular 16\n\n**_15.0.x_**\n\n- Angular 15\n\n**_14.0.x_**\n\n- Angular 14\n\n**_13.0.x_**\n\n- Angular 13\n\n**_1.2.x_**\n\n- Angular 11\n\n**_1.1.x_**\n\n- Angular 9\n- Line Awesome 1.3.0 SVG Icons (the icons are now loaded in SVG format)\n- Tree shakable icons (import only the necessary icons)\n- Removed the Font Icons support\n\nFrom the 1.0.x version, there is a small breaking changes:\n\n- You need to import the icons that you are using in your AppModule\n- You can now remove the lineawesome package from your node modules\n- Remove the lineawesome styles import on your angular.json file\n\n**_1.0.x_**\n\n- Angular 8\n- Line Awesome 1.3.0 Font Icons\n\n## Contributions\n\n```code\nClone repo:\ngit clone git@github.com:marco-martins/angular-line-awesome.git\n\nBuild:\nnpm run build angular-line-awesome\nNote: It's important to run the build with \"npm run build\" instead of \"ng build\" because there are some hooks running on \"postbuild\"\n\nRun the project (demo-example by default):\nng serve\n\nRun the tests:\nng test angular-line-awesome\n\nPull requests to the DEVELOP branch\n```\n\n## TODO\n\n- Create separated icons packages to the regular, solid and brands SVG icons\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarco-martins%2Fangular-line-awesome","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarco-martins%2Fangular-line-awesome","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarco-martins%2Fangular-line-awesome/lists"}