Add support for "fa-rotate-by"

Fixes #454

Author: devoto13

docs/usage/features.md

@@ -26,6 +26,8 @@ The following features are available as part of Font Awesome. Note that the synt
 <fa-icon [icon]="['fas', 'coffee']" [rotate]="90"></fa-icon>
 <fa-icon [icon]="['fas', 'coffee']" [rotate]="180"></fa-icon>
 <fa-icon [icon]="['fas', 'coffee']" [rotate]="270"></fa-icon>
+<!-- Or any value supported by the rotate() transform can be specified. -->
+<fa-icon [icon]="['fas', 'coffee']" rotate="45deg"></fa-icon>
 ```
 
 ### Flip

projects/demo/e2e/src/app.e2e-spec.ts

@@ -10,7 +10,7 @@ describe('Angular FontAwesome demo', () => {
   });
 
   it('should render all icons', async () => {
-    expect(await appPage.icons.count()).toBe(46);
+    expect(await appPage.icons.count()).toBe(47);
   });
 
   it('should only add styles once', async () => {

projects/demo/src/app/app.component.html

@@ -44,7 +44,9 @@ <h3>Change color</h3>
 
 <h3>Rotate</h3>
 
-<fa-icon icon="user" [rotate]="90"></fa-icon>
+<p><fa-icon icon="user" [rotate]="90"></fa-icon></p>
+
+<p><fa-icon icon="user" rotate="45deg"></fa-icon></p>
 
 <h3>Animations</h3>
 

src/lib/icon/icon.component.spec.ts

@@ -378,4 +378,57 @@ describe('FaIconComponent', () => {
         'fa-stack. Example: <fa-icon stackItemSize="2x"></fa-icon>.',
     );
   });
+
+  it('should be able to set predefined rotate as a number', () => {
+    @Component({
+      selector: 'fa-host',
+      standalone: false,
+      template: '<fa-icon icon="user" [rotate]="90"></fa-icon>',
+    })
+    class HostComponent {
+      constructor(iconLibrary: FaIconLibrary) {
+        iconLibrary.addIcons(faUser, faUserRegular);
+      }
+    }
+
+    const fixture = initTest(HostComponent);
+    fixture.detectChanges();
+    expect(queryByCss(fixture, '.fa-rotate-90')).toBeTruthy();
+  });
+
+  it('should be able to set predefined rotate as a string', () => {
+    @Component({
+      selector: 'fa-host',
+      standalone: false,
+      template: '<fa-icon icon="user" rotate="90"></fa-icon>',
+    })
+    class HostComponent {
+      constructor(iconLibrary: FaIconLibrary) {
+        iconLibrary.addIcons(faUser, faUserRegular);
+      }
+    }
+
+    const fixture = initTest(HostComponent);
+    fixture.detectChanges();
+    expect(queryByCss(fixture, '.fa-rotate-90')).toBeTruthy();
+  });
+
+  it('should be able to set customer rotate', () => {
+    @Component({
+      selector: 'fa-host',
+      standalone: false,
+      template: '<fa-icon icon="user" rotate="45deg"></fa-icon>',
+    })
+    class HostComponent {
+      constructor(iconLibrary: FaIconLibrary) {
+        iconLibrary.addIcons(faUser, faUserRegular);
+      }
+    }
+
+    const fixture = initTest(HostComponent);
+    fixture.detectChanges();
+    const svg = queryByCss(fixture, '.fa-rotate-by');
+    expect(svg).toBeTruthy();
+    expect(getComputedStyle(svg).getPropertyValue('--fa-rotate-angle')).toBe('45deg');
+  });
 });

src/lib/icon/icon.component.ts

@@ -11,14 +11,15 @@ import {
   PullProp,
   RotateProp,
   SizeProp,
+  Styles,
   Transform,
 } from '@fortawesome/fontawesome-svg-core';
 import { FaConfig } from '../config';
 import { FaIconLibrary } from '../icon-library';
 import { faWarnIfIconDefinitionMissing } from '../shared/errors/warn-if-icon-html-missing';
 import { faWarnIfIconSpecMissing } from '../shared/errors/warn-if-icon-spec-missing';
 import { AnimationProp, FaProps } from '../shared/models/props.model';
-import { faClassList } from '../shared/utils/classlist.util';
+import { faClassList, isKnownRotateValue } from '../shared/utils/classlist.util';
 import { ensureCss } from '../shared/utils/css';
 import { faNormalizeIconSpec } from '../shared/utils/normalize-icon-spec.util';
 import { FaStackItemSizeDirective } from '../stack/stack-item-size.directive';
@@ -59,7 +60,7 @@ export class FaIconComponent implements OnChanges {
   @Input() border?: boolean;
   @Input() inverse?: boolean;
   @Input() symbol?: FaSymbol;
-  @Input() rotate?: RotateProp;
+  @Input() rotate?: RotateProp | string;
   @Input() fixedWidth?: boolean;
   @Input() transform?: string | Transform;
 
@@ -147,6 +148,11 @@ export class FaIconComponent implements OnChanges {
 
     const parsedTransform = typeof this.transform === 'string' ? parse.transform(this.transform) : this.transform;
 
+    const styles: Styles = {};
+    if (classOpts.rotate != null && !isKnownRotateValue(classOpts.rotate)) {
+      styles['--fa-rotate-angle'] = `${classOpts.rotate}`;
+    }
+
     return {
       title: this.title,
       transform: parsedTransform,
@@ -156,6 +162,7 @@ export class FaIconComponent implements OnChanges {
       attributes: {
         role: this.a11yRole,
       },
+      styles,
     };
   }
 }

src/lib/layers/layers-text.component.ts

@@ -7,14 +7,15 @@ import {
   PullProp,
   RotateProp,
   SizeProp,
+  Styles,
   text,
   TextParams,
   Transform,
 } from '@fortawesome/fontawesome-svg-core';
 import { FaConfig } from '../config';
 import { faWarnIfParentNotExist } from '../shared/errors/warn-if-parent-not-exist';
 import { FaProps } from '../shared/models/props.model';
-import { faClassList } from '../shared/utils/classlist.util';
+import { faClassList, isKnownRotateValue } from '../shared/utils/classlist.util';
 import { ensureCss } from '../shared/utils/css';
 import { FaLayersComponent } from './layers.component';
 
@@ -33,7 +34,7 @@ export class FaLayersTextComponent implements OnChanges {
   @Input() pull?: PullProp;
   @Input() border?: boolean;
   @Input() inverse?: boolean;
-  @Input() rotate?: RotateProp;
+  @Input() rotate?: RotateProp | string;
   @Input() fixedWidth?: boolean;
   @Input() transform?: string | Transform;
 
@@ -72,10 +73,16 @@ export class FaLayersTextComponent implements OnChanges {
 
     const parsedTransform = typeof this.transform === 'string' ? parse.transform(this.transform) : this.transform;
 
+    const styles: Styles = {};
+    if (classOpts.rotate != null && !isKnownRotateValue(classOpts.rotate)) {
+      styles['--fa-rotate-angle'] = `${classOpts.rotate}`;
+    }
+
     return {
       transform: parsedTransform,
       classes: faClassList(classOpts),
       title: this.title,
+      styles,
     };
   }
 

src/lib/shared/models/props.model.ts

@@ -13,7 +13,7 @@ export interface FaProps {
   flip?: FlipProp;
   size?: SizeProp;
   pull?: PullProp;
-  rotate?: RotateProp;
+  rotate?: RotateProp | string;
   stackItemSize?: '1x' | '2x';
 }
 

src/lib/shared/utils/classlist.util.ts

@@ -1,10 +1,17 @@
+import { RotateProp } from '@fortawesome/fontawesome-svg-core';
 import { FaProps } from '../models/props.model';
 
+export const isKnownRotateValue = (rotate: RotateProp | string | undefined) =>
+  rotate != null &&
+  (rotate === 90 || rotate === 180 || rotate === 270 || rotate === '90' || rotate === '180' || rotate === '270');
+
 /**
  * Fontawesome class list.
  * Returns classes array by props.
  */
 export const faClassList = (props: FaProps): string[] => {
+  const knownRotateValue = isKnownRotateValue(props.rotate);
+
   const classes = {
     [`fa-${props.animation}`]: props.animation != null && !props.animation.startsWith('spin'),
     'fa-spin': props.animation === 'spin' || props.animation === 'spin-reverse',
@@ -21,7 +28,8 @@ export const faClassList = (props: FaProps): string[] => {
     'fa-flip-horizontal': props.flip === 'horizontal' || props.flip === 'both',
     'fa-flip-vertical': props.flip === 'vertical' || props.flip === 'both',
     [`fa-${props.size}`]: props.size !== null,
-    [`fa-rotate-${props.rotate}`]: props.rotate !== null,
+    [`fa-rotate-${props.rotate}`]: knownRotateValue,
+    'fa-rotate-by': props.rotate != null && !knownRotateValue,
     [`fa-pull-${props.pull}`]: props.pull !== null,
     [`fa-stack-${props.stackItemSize}`]: props.stackItemSize != null,
   };