transform

title: Transforming Icon in Iconify for Svelte

Transformations

This tutorial is part of Iconify for Svelte tutorial.

include icon-components/transform-intro

CSS vs Iconify transformations {#css}

include icon-components/transform-compare

Example:

src: icon-components/common/rotate-comparison.svelte
demo: true
demoHint: Using box-shadow to show icon dimensions
class: highlight-box

include icon-components/transform-compare-footer

Flip

include icon-components/components/transform-flip

src: icon-components/common/flip.svelte
hint: Using "flip" attribute
demo: true
extra:
  - src: icon-components/common/flip-alt.svelte
    hint: Using "hFlip" and "vFlip" attributes

Rotation

include icon-components/components/transform-rotate

src: icon-components/common/rotate.svelte
demo: true

Rotate and flip

include icon-components/components/transform-footer