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',
  });
}