rotateFromString()

This function is part of Iconify Utils package.

Function rotateFromString() cleans up various possible values for ration passed by user to valid rotate property of IconCustomisations type.

Usage

Function has the following parameter:

  • value, string. Value to parse.
  • defaultValue, number. Value to return if value cannot be parsed.

Function returns number value in 0 to 3 range.

Example

demo.ts
import { rotateFromString } from '@iconify/utils/lib/customisations/rotate';

/**
* Function returns value in 0-3 range.
*
* If value is outside of range, function returns `value % 4`. So if value is 5, which is 450deg, which equals 90deg, so result is 1
*/


// Returns 1 (90 degrees)
console.log(`Testing rotate="1":`, rotateFromString('1', 0));
console.log(`Testing rotate="5":`, rotateFromString('5', 0));
console.log(`Testing rotate="-3":`, rotateFromString('-3', 0));
console.log(`Testing rotate="90deg":`, rotateFromString('90deg', 0));
console.log(`Testing rotate="25%":`, rotateFromString('25%', 0));

// Returns 2 (180 degrees)
console.log(`Testing rotate="2":`, rotateFromString('2', 0));
console.log(`Testing rotate="-2":`, rotateFromString('-2', 0));
console.log(`Testing rotate="180deg":`, rotateFromString('180deg', 0));
console.log(`Testing rotate="50%":`, rotateFromString('50%', 0));

// Returns 3 (270 degrees)
console.log(`Testing rotate="3":`, rotateFromString('3', 0));
console.log(`Testing rotate="-1":`, rotateFromString('-1', 0));
console.log(`Testing rotate="270deg":`, rotateFromString('270deg', 0));
console.log(`Testing rotate="-90deg":`, rotateFromString('-90deg', 0));
console.log(`Testing rotate="75%":`, rotateFromString('75%', 0));
console.log(`Testing rotate="-25%":`, rotateFromString('-25%', 0));

// Returns 0 (0 degrees)
console.log(`Testing rotate="0":`, rotateFromString('0', 3));
console.log(`Testing rotate="0deg":`, rotateFromString('0deg', 2));
console.log(`Testing rotate="360deg":`, rotateFromString('360deg', 2));
console.log(`Testing rotate="0%":`, rotateFromString('0%', 2));
console.log(`Testing rotate="100%":`, rotateFromString('100%', 2));

// Bad values, returns default value set in second parameter
console.log(`Testing rotate="100deg":`, rotateFromString('100deg', 0));
console.log(`Testing rotate="40%":`, rotateFromString('40%', 0));
console.log(`Testing rotate="none":`, rotateFromString('none', 0));
Result:
Testing rotate="1": 1
Testing rotate="5": 1
Testing rotate="-3": 1
Testing rotate="90deg": 1
Testing rotate="25%": 1
Testing rotate="2": 2
Testing rotate="-2": 2
Testing rotate="180deg": 2
Testing rotate="50%": 2
Testing rotate="3": 3
Testing rotate="-1": 3
Testing rotate="270deg": 3
Testing rotate="-90deg": 3
Testing rotate="75%": 3
Testing rotate="-25%": 3
Testing rotate="0": 0
Testing rotate="0deg": 0
Testing rotate="360deg": 0
Testing rotate="0%": 0
Testing rotate="100%": 0
Testing rotate="100deg": 0
Testing rotate="40%": 0
Testing rotate="none": 0