Transformations

This tutorial is part of Iconify for Svelte tutorial.

An icon can be rotated and flipped horizontally and/or vertically. All transformations are done relative to the center of the icon.

There are two types of transformations:

  • Horizontal and vertical flip.
  • Rotation by 90, 180 and 270 degrees.

CSS vs Iconify transformations

These are not CSS transformations, transformations are applied inside SVG.

What's the difference from CSS transformations?

  • If you rotate an icon by 90 degrees in CSS, icon's bounding box remains the same. 16x24 icon still takes space for 16x24, but might overlap elements around it.
  • If you rotate an icon by 90 degrees in SVG Framework, icon's dimensions swap places. 16x24 icon becomes 24x16 icon and it does not affect elements around it.

Example:

<script>
   // npm install --save-dev @iconify/svelte @iconify-icons/fa-regular
   import Icon from '@iconify/svelte';
   import handshakeIcon from '@iconify-icons/fa-regular/handshake';
</script>

<style>

   /*
       Align icon to bottom of text, like in icon fonts.

       Cannot target component in CSS, target SVG
       instead using Svelte's :global() function
   */

   p :global(svg) {
       vertical-align: -0.125em;
   }
</style>

<p>
   Test icon
   <Icon icon=
{handshakeIcon} rotate="90deg" />
   with text around it
</p>
<p>
   Test icon
   <Icon icon=
{handshakeIcon} style="transform: rotate(90deg);" />
   with text around it
</p>

Test icon with text around it

Test icon with text around it

Using box-shadow to show icon dimensions

In example above, first icon is rotated using rotate attribute, second icon is rotated using CSS. First icon kept its 1em height, second icon became taller than it should be.

Sometimes you do want behaviour that CSS transformations provide. Then you can still use CSS transformations by adding it to inline style.

Flip

You can flip icon horizontally and/or vertically.

One way to do that is to add flip attribute with comma separated values. Possible values:

  • "horizontal": flip icon horizontally.
  • "vertical": flip icon vertically.

You can also do that by setting hFlip and / or vFlip attributes to true.

Example:

<script>
   // npm install --save-dev @iconify/svelte @iconify-icons/bi
   import Icon from '@iconify/svelte';
   import check2Circle from '@iconify-icons/bi/check2-circle';
</script>

<p>
   No flip:
   <Icon icon=
{check2Circle} />
</p>
<p>
   Horizontal flip:
   <Icon icon=
{check2Circle} flip="horizontal" />
</p>
<p>
   Vertical flip:
   <Icon icon=
{check2Circle} flip="vertical" />
</p>
<p>
   Both (or 180° rotation):
   <Icon icon=
{check2Circle} flip="horizontal,vertical" />
</p>
Using "flip" attribute
<script>
   // npm install --save-dev @iconify/svelte @iconify-icons/bi
   import Icon from '@iconify/svelte';
   import check2Circle from '@iconify-icons/bi/check2-circle';
</script>

<p>
   No flip:
   <Icon icon=
{check2Circle} />
</p>
<p>
   Horizontal flip:
   <Icon icon=
{check2Circle} hFlip={true} />
</p>
<p>
   Vertical flip:
   <Icon icon=
{check2Circle} vFlip={true} />
</p>
<p>
   Both (or 180° rotation):
   <Icon icon=
{check2Circle} hFlip={true} vFlip={true} />
</p>
Using "hFlip" and "vFlip" attributes

No flip:

Horizontal flip:

Vertical flip:

Both (or 180° rotation):

Rotation

You can rotate icon by 90, 180 and 270 degrees.

To do that, add rotate attribute. Possible values:

  • "90deg", "1": rotate by 90 degrees.
  • "180deg", "2": rotate by 180 degrees.
  • "270deg", "3": rotate by 270 degrees.

Example:

<script>
   // npm install --save-dev @iconify/svelte @iconify-icons/bi
   import Icon from '@iconify/svelte';
   import check2Circle from '@iconify-icons/bi/check2-circle';
</script>

<p>
   No rotation:
   <Icon icon=
{check2Circle} />
</p>
<p>
   90° rotation:
   <Icon icon=
{check2Circle} rotate="90deg" />
</p>
<p>
   180° rotation:
   <Icon icon=
{check2Circle} rotate="180deg" />
</p>
<p>
   270° rotation:
   <Icon icon=
{check2Circle} rotate={3} />
</p>

No rotation:

90° rotation:

180° rotation:

270° rotation:

Rotate and flip

You can use both rotation and flip on an icon. The icon is flipped first, then rotated.