Community › Forge › Assets list › Segoe Fluent Icons
segoe-fluent-icons
Reactive icon

Segoe Fluent Icons

Stable version 1.0.2 (Compatible with OutSystems 11)
Uploaded
 on 26 Apr
 by 
5.0
 (1 rating)
segoe-fluent-icons

Segoe Fluent Icons

Documentation
1.0.2

Segoe Fluent Icons Library

Based on the Segoe Fluent Icons Font (https://docs.microsoft.com/en-us/windows/apps/design/style/segoe-fluent-icons-font).

Main Features include:

  • 1403 Icons
  • 10 Standard Icon Sizes
  • 3 Rotation Angles (90º, 180º, 270º)
  • 3 Flip Effects (Horizontal, Vertical, Both)
  • Stacked Icons


The component exposes 2 Blocks:

  • SFIcon
  • SFStackedIcon


To display an Icon on a reactive web or mobile app page, simply drag and drop the SFIcon block to the desired location, and set the following input parameters:

  • SegoeFluentIconName - double-click to choose from a list of 1403 available icons (defaults to Flag)
  • SegoeFluentIconSize - select the icon size to display, from the available options 1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x (defaults to 1x)
  • SegoeFluentIconRotate - rotation to apply to the icon, from the available options 90, 180, 270 degrees (defaults to NullIdentifier(), aka no rotation)
  • SegoeFluentIconFlip - flip mode for the displayed icon, from the available options Horizontal, Vertical, Both (defaults to Nullidentifier(), aka no flip)
  • ExtendedClass - aditional CSS classes to apply to the displayed icon


To display a stacked Icon on a reactive web or mobile app page, simply drag and drop the SFStackedIcon block to the desired location, and set the following input parameters:

  • OuterIconName - double-click to choose from a list of 1403 available icons (defaults to StatusCircleBlock)
  • OuterIconExtendedClass - aditional CSS classes to apply to the outer displayed icon
  • InnerIconName - double-click to choose from a list of 1403 available icons (defaults to Microphone)
  • InnerIconExtendedClass - aditional CSS classes to apply to the inner displayed icon
  • SegoeFluentIconSize - select the icon size to display, from the available options 1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x (defaults to 1x)
  • SegoeFluentIconRotate - rotation to apply to the icon, from the available options 90, 180, 270 degrees (defaults to NullIdentifier(), aka no rotation)
  • SegoeFluentIconFlip - flip mode for the displayed icon, from the available options Horizontal, Vertical, Both (defaults to Nullidentifier(), aka no flip)


The Demo allows you to play with the options, and see them in action.


1.0.1

The Segoe Fluent Icons Forge Component was updated to version 1.0.1.

On this new version, you will find:

  • Included copyright and license information
  • A Demo package is now included on the Forge Component


No changes were made to the widgets available.


1.0.0

Segoe Fluent Icons Library

Based on the Segoe Fluent Icons Font (https://docs.microsoft.com/en-us/windows/apps/design/style/segoe-fluent-icons-font).

Main Features include:

  • 1403 Icons
  • 10 Standard Icon Sizes
  • 3 Rotation Angles (90º, 180º, 270º)
  • 3 Flip Effects (Horizontal, Vertical, Both)
  • Stacked Icons


The component exposes 2 Blocks:

  • SFIcon
  • SFStackedIcon


Just drag and drop the Icon Block to your Page or Block, and set the input parameters accordingly.

The Demo allows you to play with the options, and see them in action.