-
Notifications
You must be signed in to change notification settings - Fork 149
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Deprecate
classes
and styles
inputs in all components
Fixes #373
- Loading branch information
Showing
8 changed files
with
119 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
# Styling icon internals | ||
|
||
**DISCLAIMER:** Styling icon internals is not recommended as it relies on the component's implementation details and may silently break after any library update. | ||
|
||
For the majority of the cases, styling the icon with regular `style` and `class` properties as shown in [Custom styles](../usage/features.md#custom-styles) should be used. However, sometimes one has to attach style to one of the internal elements of the component. To achieve this, one would need to overcome the Angular [view encapsulation](https://angular.io/guide/view-encapsulation). This guide explains how to do that. | ||
|
||
## Use global styles | ||
|
||
As global styles are not subject to the view encapsulation, one can add styles for the `fa-icon` internals to the global `styles.css` and use it everywhere in the application. | ||
|
||
```css | ||
/* styles.css */ | ||
fa-icon.fancy svg path { | ||
fill: #ffffff; | ||
stroke: #ff0000; | ||
stroke-width: 10; | ||
} | ||
``` | ||
|
||
```angular2html | ||
<!-- app.component.html --> | ||
<fa-icon icon="user" class="fancy"></fa-icon> | ||
``` | ||
|
||
## Use `::ng-deep` pseudo-class selector | ||
|
||
Another options is to use `:ng-deep` pseudo-class selector. This has the benefit that styles are local to the component and won't accidentally affect `fa-icon` usage in other components of the application. | ||
|
||
```ts | ||
import { Component } from '@angular/core'; | ||
|
||
@Component({ | ||
selector: 'app-root', | ||
template: '<fa-icon icon="user" class="fancy"></fa-icon>', | ||
styles: [` | ||
fa-icon.fancy ::ng-deep svg path { | ||
fill: #ffffff; | ||
stroke: #ff0000; | ||
stroke-width: 10; | ||
} | ||
`], | ||
}) | ||
export class AppComponent {} | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
# Upgrading 0.11.0 to 0.12.0 | ||
|
||
## Remove usage of the deprecated `styles` and `classes` inputs | ||
|
||
`styles` and `classes` inputs in all components are deprecated for removal in the next release. These inputs don't work the way one would expect and cause a lot of confusion. For majority of the cases, one should use regular [class and style bindings](https://angular.io/guide/class-binding) provided by Angular. For those rare cases, when it is not enough, there is a guide on how one can style component's internal elements at their own risk - [Styling icon internals](https://github.com/FortAwesome/angular-fontawesome/blob/master/docs/guide/styling-icon-internals.md). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters