{"id":23489958,"url":"https://github.com/pjlamb12/angular-svg-icon-preloader","last_synced_at":"2025-04-15T04:32:15.405Z","repository":{"id":40549415,"uuid":"319446037","full_name":"pjlamb12/angular-svg-icon-preloader","owner":"pjlamb12","description":"Angular service that preloads a JSON list of SVG icons for use with the angular-svg-icon library","archived":false,"fork":false,"pushed_at":"2025-01-30T06:42:45.000Z","size":3399,"stargazers_count":12,"open_issues_count":3,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-28T16:03:19.309Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/pjlamb12.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":["pjlamb12"]}},"created_at":"2020-12-07T21:14:42.000Z","updated_at":"2025-01-30T07:57:24.000Z","dependencies_parsed_at":"2024-06-19T05:32:56.261Z","dependency_job_id":"cdcc058d-1a8f-4e83-bdb8-4e3497539681","html_url":"https://github.com/pjlamb12/angular-svg-icon-preloader","commit_stats":{"total_commits":55,"total_committers":1,"mean_commits":55.0,"dds":0.0,"last_synced_commit":"db86fcfebefdec7ed5f0602c8af78c4930e74e20"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjlamb12%2Fangular-svg-icon-preloader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjlamb12%2Fangular-svg-icon-preloader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjlamb12%2Fangular-svg-icon-preloader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjlamb12%2Fangular-svg-icon-preloader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pjlamb12","download_url":"https://codeload.github.com/pjlamb12/angular-svg-icon-preloader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249006387,"owners_count":21197263,"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-12-25T00:12:54.054Z","updated_at":"2025-04-15T04:32:15.387Z","avatar_url":"https://github.com/pjlamb12.png","language":"TypeScript","funding_links":["https://github.com/sponsors/pjlamb12"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n \u003cimg width=\"20%\" height=\"20%\" src=\"https://raw.githubusercontent.com/pjlamb12/angular-svg-icon-preloader/main/logo.svg\"\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)]()\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)]()\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n\nAngular SVG Icon Preloader is a library to be used in conjunction with the [angular-svg-icon library](https://www.npmjs.com/package/angular-svg-icon). The purpose is to allow you to provide a JSON file of icons that you will use frequently enough that they can be preloaded when the app bootstraps. You can still load icons after the app bootstraps the same way angular-svg-icon provides; this is just another way of loading the icons.\n\n## Features\n\n-   ✅ Preload icons as files or SVG icon data\n-   ✅ Use the icons as soon as the app loads without having to manually load the icon\n\n## Table of Contents\n\n-   [Installation](#installation)\n-   [Usage](#usage)\n\n## Installation\n\n### NPM\n\n`npm install angular-svg-icon-preloader`\n\n### Yarn\n\n`yarn add angular-svg-icon-preloader`\n\n## Usage\n\nFor the library to work, you need to first create a JSON file somewhere that your app can load. The easiest location is in the app's `assets` folder. The JSON file should have two top level attributes:\n\n-   `iconImageFiles`: an array of `IconImageFile` items. These items have two attributes each, `iconName` and `iconPath`. Both are strings. `iconName` is how you'll refer to the icon later in your app. `iconPath` is the URL to the SVG image file. This can be in the app's asset folder, or anywhere else that your app has access to reference SVG images.\n-   `customIcons`: an array of `CustomIconData` items. These items have two attributes each, `iconName` and `iconData`. Both are strings. `iconName` is how you'll refer to the icon later in your app. `iconData` is the SVG code that would go in your HTML file if you were using the raw SVG.\n\nThese arrays can have any number of icons in them, and they'll all be loaded automatically when the app bootstraps for you. Here's an example `icons.json` file:\n\n```json\n{\n\t\"iconImageFiles\": [\n\t\t{\n\t\t\t\"iconName\": \"badge-check\",\n\t\t\t\"iconPath\": \"/assets/icons/badge-check.svg\"\n\t\t}\n\t],\n\t\"customIcons\": [\n\t\t{\n\t\t\t\"iconName\": \"academic-cap\",\n\t\t\t\"iconData\": \"\u003csvg xmlns=\\\"http://www.w3.org/2000/svg\\\" \u003e \u003cpath d=\\\"...\\\" /\u003e \u003c/svg\u003e\"\n\t\t}\n\t]\n}\n```\n\nOnce you've defined your JSON file with the icon information, just import the angular-svg-icon library and this library in your `AppModule`. Make sure to provide the path to the icons JSON file in the `forRoot` method of the `AngularSvgIconPreloaderModule`'s `forRoot` method:\n\n```ts\n@NgModule({\n\timports: [\n\t\tAngularSvgIconModule.forRoot(), // angular-svg-icon library module\n\t\tAngularSvgIconPreloaderModule.forRoot({\n\t\t\tconfigUrl: './assets/json/icons.json',\n\t\t}),\n\t]\n})\n```\n\nAt this point, everything is done. To use the `academic-cap` icon in the above mentioned `customIcons` array, you only need to use the `svg-icon` component from `angular-svg-icon`:\n\n```html\n\u003csvg-icon name=\"badge-check\"\u003e\u003c/svg-icon\u003e\n\u003csvg-icon name=\"academic-cap\"\u003e\u003c/svg-icon\u003e\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/pjlamb12\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/2006222?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePreston Lamb\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/pjlamb12/angular-svg-icon-preloader/commits?author=pjlamb12\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/pjlamb12/angular-svg-icon-preloader/commits?author=pjlamb12\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/pjlamb12/angular-svg-icon-preloader/commits?author=pjlamb12\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpjlamb12%2Fangular-svg-icon-preloader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpjlamb12%2Fangular-svg-icon-preloader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpjlamb12%2Fangular-svg-icon-preloader/lists"}