Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ignacemaes/ember-phosphor-icons
A flexible icon family for Ember
https://github.com/ignacemaes/ember-phosphor-icons
addon ember icons
Last synced: about 2 months ago
JSON representation
A flexible icon family for Ember
- Host: GitHub
- URL: https://github.com/ignacemaes/ember-phosphor-icons
- Owner: IgnaceMaes
- License: mit
- Created: 2024-04-27T19:20:40.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-04-28T12:29:59.000Z (8 months ago)
- Last Synced: 2024-11-07T12:03:52.782Z (about 2 months ago)
- Topics: addon, ember, icons
- Language: TypeScript
- Homepage: https://phosphoricons.com
- Size: 4.2 MB
- Stars: 12
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Ember Phosphor icons
Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. More icons at [phosphoricons.com](https://phosphoricons.com).
[](https://npm.im/ember-phosphor-icons)
## Features
- 🔥 **1.5K+ icons**: A large set of icons - with 6 variants per icon.
- 💙 **TypeScript and Glint support**: Glint types are provided for strict template checking.
- 🌲 **Tree-shakable**: Only include the icons which are actually used in your application.
- 🎨 **Customizable**: Change the icon's color, size, and weight with simple arguments.
- 🧵 **V2 addon format**: Ready for modern Ember.
- 🚀 **SSR/SSG-ready**: Works in apps using Fastboot or Prember.
## Compatibility
- 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))
- Embroider or ember-auto-import v2
> [!IMPORTANT]
> 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.
## Installation
```sh
npm install ember-phosphor-icons
# or
yarn add ember-phosphor-icons
# or
pnpm install ember-phosphor-icons
# or
bun install ember-phosphor-icons
```
### Glint template registry
If 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.
```ts
import '@glint/environment-ember-loose';
import type EmberPhosphorIconsRegistery from 'ember-phosphor-icons/template-registry';
declare module '@glint/environment-ember-loose/registry' {
export default interface Registry extends EmberPhosphorIconsRegistery, /* ... */ {
// local entries
}
}
```
## Usage
```glimmer-js
import PhCube from 'ember-phosphor-icons/components/ph-cube';
import PhHeart from 'ember-phosphor-icons/components/ph-heart';
```
### Arguments
- **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.
- **size?**: `number | string` – Icon height & width. As with standard React elements, this can be a number, or a string with units in `px`, `%`, `em`, `rem`, `pt`, `cm`, `mm`, `in`.
- **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.
- **mirrored?**: `boolean` – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.
### Composability
Components can accept arbitrary SVG elements as children, so long as they are valid children of the `` 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.
The following will cause the Cube icon to rotate and pulse:
```glimmer-js
import PhCube from 'ember-phosphor-icons/components/ph-cube';
```
> [!NOTE]
> 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.
> [!TIP]
> 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))
## Contributing
See the [Contributing](CONTRIBUTING.md) guide for details.
## License
This project is licensed under the [MIT License](LICENSE.md).