Creating a simple Angular element using the Font Awesome SVG to reduce redundancy?-CodePudding

I'm looking at these links (replacing FA with SVG, extracting SVG) to use the Font Awesome SVG code, instead of the Font Awesome library, as I only need ~25 icons. I'm assuming this will reduce my build file size?

QUESTIONS -

Am I violating any copyright or some other Font Awesome license by doing this?
Is there a way in Angular to take the SVG code and build it into a HTML element to reduce redundancy?

ex. replace this

.fa-svg-icon {
    display: inline-flex;
    align-self: center;
    /* 
        Define a global color for the icons 
        In this case black
    */
    fill: #000;
}
/*
    Define the size of the default icons
*/
.fa-svg-icon svg {
    height:1em;
    width:1em;
}

/*
    Positionate the SVG correctly
*/
.fa-svg-icon.svg-baseline svg {
    top: .125em;
    position: relative;
}

<span class="fa-svg-icon svg-baseline">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
    <path d="M570.69,236.27,512,184.44V48a16,16,0,0,0-16-16H432a16,16,0,0,0-16,16V99.67L314.78,10.3C308.5,4.61,296.53,0,288,0s-20.46,4.61-26.74,10.3l-256,226A18.27,18.27,0,0,0,0,248.2a18.64,18.64,0,0,0,4.09,10.71L25.5,282.7a21.14,21.14,0,0,0,12,5.3,21.67,21.67,0,0,0,10.69-4.11l15.9-14V480a32,32,0,0,0,32,32H480a32,32,0,0,0,32-32V269.88l15.91,14A21.94,21.94,0,0,0,538.63,288a20.89,20.89,0,0,0,11.87-5.31l21.41-23.81A21.64,21.64,0,0,0,576,248.19,21,21,0,0,0,570.69,236.27ZM288,176a64,64,0,1,1-64,64A64,64,0,0,1,288,176ZM400,448H176a16,16,0,0,1-16-16,96,96,0,0,1,96-96h64a96,96,0,0,1,96,96A16,16,0,0,1,400,448Z"/>
  </svg>
</span>

With something like this

<SpecialIcon class="fa-svg-icon svg-baseline"></SpecialIcon>

CodePudding user response：

Question 2:

You can create a custom component in Angular to reduce redundancy by taking in icon name as input:

Icon Component:

@Component({
  selector: 'SpecialIcon',
  templateUrl: './SpecialIcon.component.html',
  styleUrls: ['./SpecialIcon.component.scss']
})
export class IconComponent {
  @Input() iconName=''; // Take the icon name as input to this component
  constructor() { }
}

HTML:

<ng-container [ngSwitch]="iconName">
  <ng-container *ngSwitchCase="'baseline'">
    <span class="fa-svg-icon svg-baseline">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
        <path d="M570.69,236.27,512,184.44V48a16,16,0,0,0-16-16H432a16,16,0,0,0-16,16V99.67L314.78,10.3C308.5,4.61,296.53,0,288,0s-20.46,4.61-26.74,10.3l-256,226A18.27,18.27,0,0,0,0,248.2a18.64,18.64,0,0,0,4.09,10.71L25.5,282.7a21.14,21.14,0,0,0,12,5.3,21.67,21.67,0,0,0,10.69-4.11l15.9-14V480a32,32,0,0,0,32,32H480a32,32,0,0,0,32-32V269.88l15.91,14A21.94,21.94,0,0,0,538.63,288a20.89,20.89,0,0,0,11.87-5.31l21.41-23.81A21.64,21.64,0,0,0,576,248.19,21,21,0,0,0,570.69,236.27ZM288,176a64,64,0,1,1-64,64A64,64,0,0,1,288,176ZM400,448H176a16,16,0,0,1-16-16,96,96,0,0,1,96-96h64a96,96,0,0,1,96,96A16,16,0,0,1,400,448Z"/>
      </svg>
    </span>
  </ng-container>
<!--For every svg, you will have to add in a switch case-->
  <ng-container *ngSwitchCase="'other'">
    <span class="fa-svg-icon svg-other">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
        <path d="M570.69,236.27,512,184.44V48a16,16,0,0,0-16-16H432a16,16,0,0,0-16,16V99.67L314.78,10.3C308.5,4.61,296.53,0,288,0s-20.46,4.61-26.74,10.3l-256,226A18.27,18.27,0,0,0,0,248.2a18.64,18.64,0,0,0,4.09,10.71L25.5,282.7a21.14,21.14,0,0,0,12,5.3,21.67,21.67,0,0,0,10.69-4.11l15.9-14V480a32,32,0,0,0,32,32H480a32,32,0,0,0,32-32V269.88l15.91,14A21.94,21.94,0,0,0,538.63,288a20.89,20.89,0,0,0,11.87-5.31l21.41-23.81A21.64,21.64,0,0,0,576,248.19,21,21,0,0,0,570.69,236.27ZM288,176a64,64,0,1,1-64,64A64,64,0,0,1,288,176ZM400,448H176a16,16,0,0,1-16-16,96,96,0,0,1,96-96h64a96,96,0,0,1,96,96A16,16,0,0,1,400,448Z"/>
      </svg>
    </span>
  </ng-container> 
<!--Default case is optional though. -->
  <ng-container *ngSwitchDefault>
    <span class="fa-svg-icon svg-default">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
        <path d="M570.69,236.27,512,184.44V48a16,16,0,0,0-16-16H432a16,16,0,0,0-16,16V99.67L314.78,10.3C308.5,4.61,296.53,0,288,0s-20.46,4.61-26.74,10.3l-256,226A18.27,18.27,0,0,0,0,248.2a18.64,18.64,0,0,0,4.09,10.71L25.5,282.7a21.14,21.14,0,0,0,12,5.3,21.67,21.67,0,0,0,10.69-4.11l15.9-14V480a32,32,0,0,0,32,32H480a32,32,0,0,0,32-32V269.88l15.91,14A21.94,21.94,0,0,0,538.63,288a20.89,20.89,0,0,0,11.87-5.31l21.41-23.81A21.64,21.64,0,0,0,576,248.19,21,21,0,0,0,570.69,236.27ZM288,176a64,64,0,1,1-64,64A64,64,0,0,1,288,176ZM400,448H176a16,16,0,0,1-16-16,96,96,0,0,1,96-96h64a96,96,0,0,1,96,96A16,16,0,0,1,400,448Z"/>
      </svg>
    </span>
  </ng-container> 
</ng-container>

CSS: Place all your CSS in SpecialIcon.component.scss file. You can have separate CSS for each icon in this file.

/*
    For each icon, you can have different stylings
*/
.fa-svg-icon.svg-baseline svg {
    top: .125em;
    position: relative;
}

Usage: Pass in the icon name to the component

<SpecialIcon [iconName]="'baseline'"></SpecialIcon >

Question 1: The official website says that its open source, so you can use it. https://fontawesome.com/v4.7/license/

Font Awesome is fully open source and is GPL friendly. You can use it for commercial projects, open source projects, or really just about whatever you want.