Animated svg

Component used to display animated Scalable Vector Graphics (SVG)
Click on an SVG to copy name to clipboard
animation-bird-illuminated
animation-bird-loading-simple
animation-bird-loading-sparkling
animation-pvp-bids-empty
animation-pvp-tasklist-empty
animation-user-list-empty
animation-user-profile-reviews-empty
animation-sparkles-v2
import { Component } from '@angular/core';
import { Clipboard } from '@freelancer/clipboard';
import { FontColor, FontWeight, TextSize } from '@freelancer/ui/text';

@Component({
  selector: 'fl-animated-svg-animated-svg-list-story',
  template: `
    <fl-text
      [color]="FontColor.ERROR"
      [flMarginBottom]="'small'"
      [weight]="FontWeight.BOLD"
    >
      Click on an SVG to copy name to clipboard
    </fl-text>

    <div class="SvgList">
      <div
        class="SvgItem"
        *ngFor="let animatedSvgName of animatedSvgNames"
      >
        <fl-animated-svg
          class="AnimatedSvg"
          [name]="animatedSvgName"
          [clickable]="true"
          (click)="copyToClipboard(animatedSvgName)"
        ></fl-animated-svg>
        <fl-text [size]="TextSize.XXXSMALL"> {{ animatedSvgName }} </fl-text>
      </div>
    </div>
  `,
  styleUrls: ['./animated-svg-list.story.scss'],
})
export class AnimatedSvgAnimatedSvgListStoryComponent {
  FontColor = FontColor;
  FontWeight = FontWeight;
  TextSize = TextSize;

  readonly animatedSvgNames: readonly string[] = [
    'animation-bird-illuminated',
    'animation-bird-loading-simple',
    'animation-bird-loading-sparkling',
    'animation-pvp-bids-empty',
    'animation-pvp-tasklist-empty',
    'animation-user-list-empty',
    'animation-user-profile-reviews-empty',
    'animation-sparkles-v2',
  ];

  constructor(private clipboard: Clipboard) {}

  copyToClipboard(name: string): boolean | void {
    return this.clipboard.copy(
      `<fl-animated-svg [name]="'${name}'"></fl-animated-svg>`,
    );
  }
}
@use "settings/settings" as *;

.SvgList {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
}

.SvgItem {
  border-radius: $border-radius;
  cursor: pointer;
  flex: 0 0 50%;
  padding: $spacing-xsmall $spacing-xxsmall;
  text-align: center;

  &:hover {
    background-color: var(--color-bg-dark);

    .AnimatedSvg {
      transform: scale(1.2);
    }
  }
}

.AnimatedSvg {
  transition: transform 0.2s ease-out;
}
Inputs
name : string
SVG filename inside the `@freelancer/ui/assets/icon` folder. Without the `.svg` extension and prefixed by `animation-`.
clickable ?: boolean = false
display ?: SvgDisplay = 'inline-block'
label ?: string = ''
Aria label used for accessibility. Similar to the alt text of the picture component.
loadMethod ?: SvgLoadMethod = 'eager'
Outputs
svgLoaded ?: any = new EventEmitter<boolean>()
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.