Soccer-Jersey

Generate Soccer Jersey SVG images. Generates Data URIs that can be used directly as image src.

Pros & pros

Save network data, by dynamically generating soccer jersey assets suited for each player. Great for large projects where you would want to customize Soccer Jersey for each player.

Install



npm i soccer-jersey





Live Demos

View live demos & examples



Usage



$3



   SoccerJersey.draw({

    shirtText: ,

    textColor: ,

    textOutlineColor?: ,

    textBackgroundColor?: ,

    shirtColor: ,

    sleeveColor: ,

    shirtStyle: <'plain' | 'two-color' | 'striped' | 'striped-thin' | 'striped-thick' | 'waves' 

                | 'checkered' | 'hoops' | 'single-band' | 'dashed'>,

    shirtStyleColor?: ,

    shirtStyleDirection?: <'diagonal-right' | 'diagonal-left' | 'horizontal' | 'vertical'>,

    isBack?: ,

}, 

encodeToDataUri?: boolean): string

$3



import SoccerJersey from "soccer-jersey";



const TeamPage = () => {



  const jerseyImgSrc =  SoccerJersey.draw({  

      shirtText: "ARS",

      shirtColor: "#f00000",

      sleeveColor: "#fff",

      shirtStyle: "checkered",

      shirtStyleColor: "#dc0001",

      textColor: "#fff",

    }); // data:image/svg+xml;base64,......



...



  return (

    

      ARS

      

    

  );

}

$3

BHA

...







$3



Create "safe" pipe to allow dynamic Data URIs.



// safe-html.pipe.ts



import { Pipe, PipeTransform } from '@angular/core';

import { DomSanitizer, SafeHtml} from '@angular/platform-browser';



@Pipe({ name: 'safe' })



export class SafeHtmlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {}

  transform(url): SafeHtml {

    return this.sanitizer.bypassSecurityTrustResourceUrl(url);

  }

}



Add Pipe to Declerations



import { SafeHtmlPipe } from './safe-html.pipe';



...



@NgModule({

  declarations: [

    ...

    SafeHtmlPipe,

  ]

})



Use in components



@Component({

...

  template:

MCI

,

...

})

export class AppComponent {

  ...

  jerseyImgSrc = SoccerJersey.draw({

    shirtText: 'MCI',

    shirtColor: '#98c5e9',

    sleeveColor: '#98c5e9',

    shirtStyle: 'plain',

    textColor: '#00285e',

  });

}

soccer-jersey-fixed

Soccer-Jersey

Pros & pros

Install

Live Demos

Usage

$3

$3

ARS

$3

BHA

$3

MCI