Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kaermorchen/ember-mdi
An ember-cli addon for using Material Design Icons in Ember applications.
https://github.com/kaermorchen/ember-mdi
Last synced: 9 days ago
JSON representation
An ember-cli addon for using Material Design Icons in Ember applications.
- Host: GitHub
- URL: https://github.com/kaermorchen/ember-mdi
- Owner: kaermorchen
- License: mit
- Created: 2017-09-16T06:03:37.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-09-24T14:38:17.000Z (about 1 month ago)
- Last Synced: 2024-10-15T06:46:13.016Z (21 days ago)
- Language: JavaScript
- Homepage: https://kaermorchen.github.io/ember-mdi/
- Size: 13.3 MB
- Stars: 13
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
Ember Material Design Icons
==============================================================================
An [ember-cli](http://www.ember-cli.com) addon for using [Material Design Icons](https://materialdesignicons.com/) in Ember applications.
### [Demo](https://kaermorchen.github.io/ember-mdi/)
Compatibility
------------------------------------------------------------------------------
* Ember.js v3.28 or above
* Embroider or ember-auto-import v2
Installation
------------------------------------------------------------------------------
```
ember install ember-mdi
```
Usage
------------------------------------------------------------------------------
There are more than 7k icons and we can't store they all in a build by an performance issue. For this reason import an icon into your project for use it in template. Example:
```js
//app/components/icons/github.js
export { Github as default } from 'ember-mdi';
```
```hbs
{{! app/templates/application.hbs }}
```
Another way to use the icons is import they in a controller or a component. Example:
```js
//app/controllers/application.js
import Controller from '@ember/controller';
import { Github } from 'ember-mdi';
export default class ApplicationController extends Controller {
Github = Github;
}
```
```hbs
{{! app/templates/application.hbs }}
```
Options
------------------------------------------------------------------------------
All icons have some options with default values:
| Name | Value |
|-------------------|-------|
| @size | 24 |
| @title | null |
| @fill | null |
| @role | "img" |
| @spin | false |
| @flipH | false |
| @flipV | false |
| @rotate | null |
| @stroke | null |
| @strokeWidth | null |
| @strokeLinecap | null |
| @strokeLinejoin | null |
| @strokeDasharray | null |
| @strokeDashoffset | null |
| @strokeOpacity | null |
System-wide config
------------------------------------------------------------------------------
Use a mixin-function for system-wide extending the icons:
```js
//app/components/submarine/github.js
import { Submarine } from 'ember-mdi';
// Mixin
function Yellow(BaseClass) {
return class extends BaseClass {
get fill() {
return 'yellow';
}
};
}
export default Yellow(Submarine);
```
Contributing
------------------------------------------------------------------------------
See the [Contributing](CONTRIBUTING.md) guide for details.
License
------------------------------------------------------------------------------
This project is licensed under the [MIT License](LICENSE.md).