{"id":15015740,"url":"https://github.com/ignacemaes/ember-phosphor-icons","last_synced_at":"2026-03-15T23:39:40.364Z","repository":{"id":236579429,"uuid":"792867619","full_name":"IgnaceMaes/ember-phosphor-icons","owner":"IgnaceMaes","description":"A flexible icon family for Ember","archived":false,"fork":false,"pushed_at":"2024-04-28T12:29:59.000Z","size":4404,"stargazers_count":14,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T12:56:56.716Z","etag":null,"topics":["addon","ember","icons"],"latest_commit_sha":null,"homepage":"https://phosphoricons.com","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/IgnaceMaes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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":"2024-04-27T19:20:40.000Z","updated_at":"2024-12-22T07:22:22.000Z","dependencies_parsed_at":"2024-09-16T04:01:08.285Z","dependency_job_id":null,"html_url":"https://github.com/IgnaceMaes/ember-phosphor-icons","commit_stats":{"total_commits":41,"total_committers":3,"mean_commits":"13.666666666666666","dds":"0.12195121951219512","last_synced_commit":"4fa17f349863f3be512b56d2f99c86237fbbdbed"},"previous_names":["ignacemaes/ember-phosphor-icons"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IgnaceMaes%2Fember-phosphor-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IgnaceMaes%2Fember-phosphor-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IgnaceMaes%2Fember-phosphor-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IgnaceMaes%2Fember-phosphor-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IgnaceMaes","download_url":"https://codeload.github.com/IgnaceMaes/ember-phosphor-icons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248546121,"owners_count":21122255,"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":["addon","ember","icons"],"created_at":"2024-09-24T19:47:51.952Z","updated_at":"2026-03-15T23:39:40.290Z","avatar_url":"https://github.com/IgnaceMaes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"/meta/phosphor-mark-tight-yellow.png\" width=\"128\" align=\"right\" /\u003e\n\n# Ember Phosphor icons\n\nPhosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. More icons at [phosphoricons.com](https://phosphoricons.com).\n\n[![npm](https://img.shields.io/npm/v/ember-phosphor-icons)](https://npm.im/ember-phosphor-icons)\n\n## Features\n\n- 🔥 **1.5K+ icons**: A large set of icons - with 6 variants per icon.\n- 💙 **TypeScript and Glint support**: Glint types are provided for strict template checking.\n- 🌲 **Tree-shakable**: Only include the icons which are actually used in your application.\n- 🎨 **Customizable**: Change the icon's color, size, and weight with simple arguments.\n- 🧵 **V2 addon format**: Ready for modern Ember.\n- 🚀 **SSR/SSG-ready**: Works in apps using Fastboot or Prember.\n\n## Compatibility\n\n- Ember.js v4.5 or above (for versions below install [ember-functions-as-helper-polyfill](https://github.com/ember-polyfills/ember-functions-as-helper-polyfill))\n- Embroider or ember-auto-import v2\n\n\u003e [!IMPORTANT]  \n\u003e It is highly recommended to only use this addon with Embroider. Otherwise you do not get the benefit of tree shaking and the full icon set will be included, which increases the bundle size by a lot.\n\n## Installation\n\n```sh\nnpm install ember-phosphor-icons\n# or\nyarn add ember-phosphor-icons\n# or\npnpm install ember-phosphor-icons\n# or\nbun install ember-phosphor-icons\n```\n\n### Glint template registry\n\nIf you're not yet using template tag components, you can make use of the provided template registry for Glint. This will allow you to use the icons in your templates with full type checking.\n\n```ts\nimport '@glint/environment-ember-loose';\nimport type EmberPhosphorIconsRegistery from 'ember-phosphor-icons/template-registry';\n\ndeclare module '@glint/environment-ember-loose/registry' {\n  export default interface Registry extends EmberPhosphorIconsRegistery, /* ... */ {\n    // local entries\n  }\n}\n```\n\n## Usage\n\n```glimmer-js\nimport PhCube from 'ember-phosphor-icons/components/ph-cube';\nimport PhHeart from 'ember-phosphor-icons/components/ph-heart';\n\n\u003ctemplate\u003e\n  \u003cPhCube /\u003e\n  \u003cPhHeart @size=\"32\" @color=\"hotpink\" @weight=\"fill\" /\u003e\n\u003c/template\u003e\n```\n\n### Arguments\n\n- **color?**: `string` – Icon stroke/fill color. Can be any CSS color string, including `hex`, `rgb`, `rgba`, `hsl`, `hsla`, named colors, or the special `currentColor` variable.\n- **size?**: `number | string` – Icon height \u0026 width. As with standard React elements, this can be a number, or a string with units in `px`, `%`, `em`, `rem`, `pt`, `cm`, `mm`, `in`.\n- **weight?**: `\"thin\" | \"light\" | \"regular\" | \"bold\" | \"fill\" | \"duotone\"` – Icon weight/style. Can also be used, for example, to \"toggle\" an icon's state: a rating component could use Stars with `weight=\"regular\"` to denote an empty star, and `weight=\"fill\"` to denote a filled star.\n- **mirrored?**: `boolean` – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.\n\n### Composability\n\n\u003cimg src=\"./meta/cube-rotate.svg\" width=\"128\" align=\"right\" /\u003e\n\nComponents can accept arbitrary SVG elements as children, so long as they are valid children of the `\u003csvg\u003e` element. This can be used to modify an icon with background layers or shapes, filters, animations and more. The children will be placed _below_ the normal icon contents.\n\nThe following will cause the Cube icon to rotate and pulse:\n\n```glimmer-js\nimport PhCube from 'ember-phosphor-icons/components/ph-cube';\n\n\u003ctemplate\u003e\n  \u003cPhCube @color=\"darkorchid\" @weight=\"duotone\"\u003e\n    \u003canimate\n      attributeName=\"opacity\"\n      values=\"0;1;0\"\n      dur=\"4s\"\n      repeatCount=\"indefinite\"\n    /\u003e\n    \u003canimateTransform\n      attributeName=\"transform\"\n      attributeType=\"XML\"\n      type=\"rotate\"\n      dur=\"5s\"\n      from=\"0 0 0\"\n      to=\"360 0 0\"\n      repeatCount=\"indefinite\"\n    /\u003e\n  \u003c/PhCube\u003e\n\u003c/template\u003e\n```\n\n\u003e [!NOTE]\n\u003e The coordinate space of slotted elements is relative to the contents of the icon `viewBox`, which is a 256x256 square. Only [valid SVG elements](https://developer.mozilla.org/en-US/docs/Web/SVG/Element#SVG_elements_by_category) will be rendered.\n\n\u003e [!TIP]\n\u003e Make sure you have `babel-plugin-ember-template-compilation@^2.2.2` or higher installed to support camel cased SVG elements. ([as this was a known bug before](https://github.com/emberjs/babel-plugin-ember-template-compilation/pull/33))\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fignacemaes%2Fember-phosphor-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fignacemaes%2Fember-phosphor-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fignacemaes%2Fember-phosphor-icons/lists"}